I have a situation with the Sortable I can't seem to replicate in Plunker.
From what I can tell, Sortable slows down a lot because of something in change detection. Slow to the point of unusable. Visually, you can see the first animation, but then it very slowly refreshes as it slowly finishes change detection.
Here's a plunker that mimics what I have in my code.
http://plnkr.co/edit/veH2Y6CkFZ1Dc5jwcPWZ?p=preview
<kendo-sortable [data]="columns"
zone="abcdefg"
[animation]="true"
[activeIndex]="activeIndex"
itemClass="item"
emptyItemClass="emptyItem"
activeItemClass="activeItem item">
<ng-template let-column="item">
<div class="container" (click)="itemClick(column)">
<span class="col-name">
{{column.title || column.field}}
</span>
<span class="col-width">{{column.width}}</span>
</div>
</ng-template>
</kendo-sortable>
Basically the dialog is wrapped in a reusable component where I feed strings, templates or components into.
The "columns" array coming into the Input of SortableThingComponent is a copy of the array (all new'd Column objects) from a kendo grid.
Since I can't replicate the slow-down, I'm not sure what's going on. Does anyone see anything or have any tidbits about Sortable?
Edit
Here's an updated plunker that includes a grid. I noticed that if I didn't have data in the grid, the Sortable was faster. Workable, but still a little bit slow. The grid is virtual scrolling, page size 100.
http://plnkr.co/edit/hw8HaKpyZ0lRlVwF2tYp?p=preview
Edit 2
Updated the last plunker with data. Now I'm repro'ing the issue.
What can be done about this?
Here's a fix for now; detach the change detector for the grid component while the dialog with the sortable is open: http://plnkr.co/edit/yy1Z4rWC53vS3xCnxrWT?p=preview
constructor(private changeDetectorRef: ChangeDetectorRef) { }
this.changeDetectorRef.detach(); // when dialog opens
this.changeDetectorRef.reattach(); // when dialog closes
In the plunker, I had to add a this.changeDetectorRef.detectChanges() because of the way I'm opening the dialog.
For now, this is an OK workaround. I might play with the change detection strategy to get it all a little more efficient
Related
I'm looking to create a reusable, modularized component in Umbraco 9. I've never worked with any Umbraco before. The example I'll use is a text widget/component that has an image on the left and text on the right, with the ability to set whether you want to swap this to be image right, text left.
I come from the Sitecore world where creating a component like this would mean creating a definition with the fields in the back office, creating an MVC controller and an action, and pointing that back office definition at the controller/action combo. Then, anywhere I've deemed a component hot spot, I can click an "add component" and it'd display the available components I've created (Text + Image Block, in our example).
Our team has been researching how to do something like this in Umbraco. We've been using element types. I've got it working where I can create a list of element types, but we couldn't figure out how to add a controller/action/view to this process to really control what gets displayed.
We've looked into the Grid Type Editor. That requires some Angular work that wasn't exactly playing nice, for some reason it was seeing our image fields as null even though they had an image.
We also tried messing with the Block List editor, and are currently investigating macros.
We've been spinning our wheels and I'm hoping to get some assistance on how to do something like this in Umbraco. Perhaps I'm searching/using the wrong terminology?
Most of our components are super simple, and rather than create a reusable component, we can just use the grid editor. In our example above, we could create a 50/50 grid row and put an image in the left column and the text in the right. This would work, but we'd like to have a little more of a reusable package. Furthermore, a few of the components will require some controller functionality to be able to hit an API and massage some data before passing it to the presentation layer.
We will keep investigating, but ultimately I'm hoping someone can clear up if we're going down the wrong path, or just missing some crucial point here.
Sure! Two ways come to mind for me. One would be make a simple doctype like the screenshot below and let layout decide how to stack them
This sample uses bootstrap which of course you don't have to use, and in my case I have them in a nested content element so I basically just loop through them and alternate putting flex-row-reverse on the row.
#{
var i = 0
foreach(var contentBlock in Model.ContentBlocks)
{
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
<div class="block-left col-sm-7">
<h5>#contentBlock.SectionHeading</h5>
#Html.Raw(contentBlock.SectionDescription.ToString())
</div>
#if(contentBlock.HasValue("sectionImage") && contentBlock.SectionImage != null)
{
<div class="block1-right col-sm-5 ml-auto">
<figure class="hover">
<img id="#contentBlock.SectionImage.Name.Trim().Replace(" ", "-")" src="#contentBlock.SectionImage.Url">
</figure>
</div>
}
</div>
i++;
}
}
The other way (as you asked for) is to give the content editor the choice with a toggle, add a toggle to the doctype
and instead of this line
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
you could use this line
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "flex-row-reverse":null)">
Or even something like this where you just assign your own class and write the CSS separately
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "block-right":"block-left")">
Hope that helps get you going in the right direction. I'm sure you'll have to adapt this for your situation and this code is not tested.
Happy to help if you have any issues.
On my jsf page at some point I send a message to the growl component.
<p:growl id="growlLong" for="growlLong" showDetail="true" life="10000" sticky="false"/>
Once the 10sec is over, or dismissed by clicking the X, the issue that occurs is the element below the growl is not selectable. By inspecting the components on the page, looks like the actual div stayed there and blocks the content below it.
<?xml version="1.0" encoding="UTF-8"?>
<div class="ui-growl-item">
<div class="ui-growl-icon-close ui-icon ui-icon-closethick" style="display: none;" />
<span class="ui-growl-image ui-growl-image-info" />
<div class="ui-growl-message">
<span class="ui-growl-title">Success!</span>
<p>Configuration successfully saved.</p>
</div>
<div style="clear: both;" />
</div>
So, the question is - how do I make this to go away and keep the content below still usable?
Here is the screenshot of the issue, as seen with "inspect element", blue boxes are existing links, red box is the dismissed growl. Inside the blue box, we can't click the part that is covered by the red box.
This topic might be older but I just recently stumbled upon it:
The reason that the showcase is working but my version was not was that I gave the .ui-growl CSS class a height AND a width. In the showcase, the size of the container is only defined by its content and thus 0 if there are no items to display.
I moved my height definition to .ui-growl-item (which is more appropriate anyhow) and now it's working like a charm.
While the it would be desirable to be able to tell growl to not leave behind the <div id="growlLong_container"> structure in the DOM, the simple solution is to just select it and remove it using your favorite method to manipulate the DOM.
The ID appears to be the ID you passed to growl: id="growlLong" + "_container". With a DOM ID it is a simple matter of selecting it and removing it.
Yes, it would be nice to be able to get growl to not leave it in there. However, there is a point of diminishing returns vs. the amount of effort you spend trying to find a solution. It appears to be well past the point where you should just use a hack and remove it. Make a note about it, move on. Leave a comment in the code that this is why you are making the DOM manipulation. A possibility rather than removing teh <div> is to adjust the z-index such that it is below that of the UI elements. Another possibility is to add display:none; to the style. Obviously, code it such that if the <div> is not there nothing goes wrong. Verify that the next use of growl still performs correctly.
Ask on the Growl discussion group. Submit it as a bug with growl. If a way surfaces to make growl not leave something like this in the DOM revisit the code and apply it.
As to removing it, if you have JavaScript available it is as simple as:
document.getElementById("growlLong_container").remove();
To be more specific we really need more information about your code and the environment in which you are running.
A "solution" that should remove the <div>:
Hopefully you will receive an answer which allows the elements to be hidden/removed by growl. However, there does not appear to be one at present.
The following script should wait around checking every 250ms to see if the <div id="growlLong_container"> has been entered into the DOM. Once the <div> has been entered into the DOM, the script will wait 10s. If the <div> exists after the 10s it will be removed. The script is a hack. But it should work.
You will need to place it such that it makes it onto the page, either enclosed in tags (as are here), or in a file without the first line:<script class="code" type="text/javascript"> and the last line: </script> removed. If you use a separate file you will need to have it included in a similar manner as you do jquery.js, foundation.js, foundation.topbar.js and foundation.tooltip.js.
<script class="code" type="text/javascript">
(function () {
"use strict";
const maxGrowlTime = 10000; //In milliseconds
const checkFrequency = 250; //In milliseconds
var intervalTimer=0;
var foundGrowl=false;
function dismissGrowl() {
var growlId;
growlId = document.getElementById("growlLong_container");
if(growlId) {
growlId.parentNode.removeChild(growlId);
}
foundGrowl=false;
setGrowlCheckInterval();
}
function checkForGrowl() {
var growlId;
if(foundGrowl) {
return;
}
growlId = document.getElementById("growlLong_container");
if(growlId) {
foundGrowl=true;
clearInterval(intervalTimer);
setTimeout(dismissGrowl, maxGrowlTime );
}
}
function setGrowlCheckInterval() {
intervalTimer = setInterval(checkForGrowl, checkFrequency );
}
setGrowlCheckInterval();
})();
</script>
My hope is that you find an answer that does not require a hack such as this. However, this should solve your problem, at least to an extent. With the script, the prevention of using those controls will last for at least the entire 10s up to 10.25s even if the user dismisses the growl early. With the two screenshots mentioned in the comments it would probably be possible to change the script such that it detects if the user dismisses the grow and then remove the <div> immediately. This would make it more responsive to user input.
This solution assumes that the <div id="growlLong_container"> does not exist in the DOM prior to your issuing the <p:growl id="growlLong" and that it is not needed afterwards. This is very likely because the ID of the dive appears to be composed of the ID you pass the growl.
Mainly, this issue looks like a bug or incompatibility issue between components.
I'm having problems with my fixed menu. As you can see of the example beneath it's not possible to click the links "Vingårde, Dyrkning..." because of the div box with the fixed menu on top of it. I've tried ordering the layers with z-index but I just can't get it to work. Can anybody help me out?
http://itu.dk/people/mbul/humlum/
And if anyone by the way have a method on auto adjusting the height of the page so it covers the whole viewport I would be very glad to hear from you :-) In the website version above I've set the height manually to 1000px which is not preferable
Thank you!
You need to put all the wrappers' elements outside of it and put them after the left-page container and before the right-page container. Finally, remove the wrapper, it seems unnecessary for the page in order to work.
I fixed it through Chrome's dev tools, but I assume it should work if you modify the html that way.
The body should look like this:
<div id="left_page_container">...</div>
<div class="nav_humlunvim">...</div>
<div class="nav_butik">...</div>
<div class="nav_blog">...</div>
<div class="nav_kontakt">...</div>
<div id="right_page_container">...</div>
Hope it helps; as an extra observation it is more common to use "hyphen-separated-names" for selectors than to use "snake_case_names" :)
So I load some simple HTML into a webview.
The html is in the format: (it is extracted html, therefore no body tags.
<p>..blah</p>
<div style="text-align:center;">
<a href="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1-18140712.jpg" target="_blank">
<img src="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1_thumb-18140804.jpg"></a></div>
<p>..blah</p>
In the webview activity class I add:
webInfo = "<body style=\"color:white;font-size:15px\">" + webInfo + "</body>";
//for setting the size and color of the text
I use the following to load the html:
webview.loadDataWithBaseURL(null,webInfo,"text/html","UTF-8",null);
// webInfo is an html string
and I do the following so that it doesn't scroll horizontally and so that the image fits within the screen.
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);|
If I don't use SINGLE_COLUMN, I'm always scrolling horizontally, even though the text fits nicely within the page. I thought it had finally solved the problem but I get overlapping html when i load it. This fixes itself if I zoom slightly in or out with my fingers.
Here's a picture of whats happening:
Question 1:
How do I fix that problem and display the image so it fits in the screen and no horizontal scrolling is required?
Question 2:
I've also been having trouble getting rid of the weird symbols too, my 's show up really weird.Tried using several different encodings like UTF-8, US-ACSII and lots of Windows ones, none of them seem to work to get rid of the symbols.
I hope I've been clear, any help is appreciated, I've been fiddling with this for a while O_O...
Add in webview settings:
webSettings.setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING) //handle for font overlapping.
I am trying to move text next to my header, but it is not working using margins - when i try to move it all the text boxes move, even though each text box is a seperate div tag.
Here is my code for this part
<body>
<div id="wrapper">
<div id="header">
<h4><strong>Qtek Australia</strong></h4>
<div id="home">Home</div>
<div id="Aboutus">About us</div>
<div id="Contactus">Contact us</div>
<div id="Location">Location</div>
</div>
i am trying to move the home, about us, contact us and location to the right of the header "Qtek Australia", please help
You can try wrapping the h4 in another div and placing it where you want.
If this is the way you already tried, another way could be wrapping the three div you want to place on the left in one div, the other four in another and move around these two divs. It should be easier, even if you can get divitis doing so.
I will say that your document semantics are quite vague. You probably don't need to use STRONG inside your heading - it's conceivable that you really mean to emphasize the thought expressed in it, but I suspect that you only want the heading to appear bolder. Use CSS to achieve that, as in: h4 {font-weight:bold; font-size: 14em;}.
It's also conceivable that your page makes the most sense with the navigation starting at the fourth level of some topic, but it's highly unlikely; in the vast majority of cases, the navigation would exists higher up - under h1 or h2.
Your navigation itself would be more coherent if it was an unordered list.
<ul>
<li>Home</li>
<li>About Us</li>
...
</ul>
This also has the advantage of allowing you to style the navigation elements both as a set and individually.
You probably don't need to be wrapping your elements in all those divs. Most elements in HTML are containers - headings, lists, paragraphs, just about everything can be styled - including positioning and moving - by itself.
For instance, one means of positioning the navigation list to the right of the h4 would be to style the h4 with "display:inline", or "float:left", which would bring the following element (the list) onto the same line. There's a lot of different ways to go about that kind of positioning, and it's not even clear that this is what you're after.
Clarify what you mean; and it would help if you posted whatever CSS or JavaScript you're using.