It looks like angular ui-grid, in some cases, wrongly calculating or canvasHeight or top margin of first row from renderedRows - result is big blank space in the ending, when scrolling to bottom of the list.
It can be "fixed" in GridRenderContainer.prototype.adjustRows function, by increasing self.grid.options.excessRows number, or calling self.updateViewableRowRange with lesser range start position, but this leads to rendering of hidden rows, that, kinda, killing sense of ui-grid using.
Also, this problem can be "fixed", by adjusting ui-grid canvas element height by jquery.
Is there correct way to fix this problem?
Related
In week view of Fullcalendar.js, there is a small space to the right of the rightmost event (in each day/overlapping), so that the slots this event occupies may remain clickable. However, the space is pretty small by default. I need to make it bigger.
I inspected every element of the tables that conform a Fullcalendar (currently using version 2.5.0), but I can't seem to find the place where the width of this space is set. I'm beginning to think it's calculated from the events' width, but I'm uncertain.
Is there any way to increase this space in week view?
EDIT:
The only provided answer does not work as intended because it adds some space to the right of ALL overlapping events (If two or more events overlap, then the space is added between the overlapping events, and not just to the rightmost event, as desired.)
EDIT:
There is now an officially accepted answer that seems to be working.
It is quite old but maybe it helps someone:
You can just set the event container margin
.fc-ltr .fc-time-grid .fc-event-container {
margin: 0 5.0% 0 2px;
}
Try this one
eventAfterRender: function( event, element, view ) {
var width = $(element).width();
width = width - ( width / 3); // Less whatever you want
// Set the new width
$(element).css('width', width + 'px');
}
This works for me.
I have a page with anywhere between 1 and 6 dynamically built iframes containing RadGrids in two columns on the page. I've managed to get a column by the name Document Number to line up in all of them, however if one of them contains more data then the space allowed it will scroll. This is expected and correct.
My issue is when the scrollbar does show it pushes all my columns left just a smidge in that grid, and now it's out of sync with the other grids. I've added a small column which I can dynamically display to push the other grids' columns to match, I just need to be able to detect/determine if a scroll bar is actually being displayed.
I found an old telerik post that suggests I use the scroll height vs the overflow height and if scroll height is larger then we know there's a scroll bar being displayed. My attempts to use the supplied javascript have shown me that the post is outdated and that GridDataDiv no longer exists.
Is there a new/updated way to detect the presence of a scrollbar? Alternatively, is there a better way to have my document number columns even regardless of scrollbar?
Compare the grid's client width and the scroll area width of the grid data:
var grid = document.getElementById("RadGrid1"),
scrollArea = document.getElementById("RadGrid1_GridData");
// ex. 171 (note no units included)
alert("grid.clientHeight: " + grid.clientHeight);
// ex. 300px (note the "px" units are included)
alert("scrollArea.style.height: " + scrollArea.style.height);
// Is the verticle scroll bar visible?
var vertIsVis = scrollArea.style.height.replace("px", "") > grid.clientHeight;
I have a scrolling div, which has enough controls to scroll. Which all flow in a block display. when scrolling down, when i was to take a snapshot of all the elements, i was wanting to get the list of all the positions and print them out. The issue at hand is that when scrolling, things that are out of view (towards the top) have a neg. position.
I was looking at offset and Position, but they both arent giving me the numbers i was wanting.
How would i get the X:Y positions of all the children, from the top of the div? IE: [0,0], [0,20], [0,40] etc etc.
Is there another variable i am not making use of? some sort of scrollY or something which should be appended to adjust everything?
Edit: When dealing with scrollable divs, making use of: $.scrollTop gives the offset, which would need to be applied to all the children. when getting the position of all the items
If I'm understanding the question correctly, it sounds like you want scrollTop, i.e.
document.getElementById('div1').scrollTop;
...which you can get and set. If I've misudnderstood, perhaps you could create a jsfiddle?
I am using kendoSplitter to create a page layout with 2 panes.
Setting the first pane size as "100px" and the remaining space for 2nd pane.
Set the padding for the panes as "5px" and set the box-sizing as "border-box".
So,expected the width of pane1 including padding is "100px"
But on page load, it applied padding on top of 100px,making the width as 110px and leading to scrollbar.
$('#splitter').kendoSplitter({
panes:[
{collapsible:true,size:'100px'},
{collapsible:true,resizable:true}
]
});
jsFiddler for this case:
http://jsfiddle.net/nagakiran/xmTJF/
But if I apply the padding after initializing kendoSplitter,it works as in this fiddler.
http://jsfiddle.net/nagakiran/hPVWf/1/
Looks it's a bug in kendoUI or am I missing something?
I don't think it is a bug. Maybe an undocumented feature or a side-effect. It seems that is a question about the order on how things are executed.
Remember that you HTML is "decorated" by KendoUI widgets so what you have defined as splitter1 is not just your div but more things (the decoration).
When you style it after invoking kendoSplitter you are actually re-decorating the result of KendoUI decoration. Since kendoSplitter sets the width of your pane to a fixed width, the padding does not add extra space.
But when you use the CSS, it runs simultaneously to kendoSplitter and when it asks for the size, it gets the wrong size.
Should KendoUI be smarter? Maybe but it's actually pretty hard guessing what CSS are going to do and apply a counter action before the CSS.
Fixed it by adding a flag in kendoSplitter which modifies the way width is assigned to splitter panes. If this flag is set,it will reduce the width that's assigned to each pane by the "padding-left+padding-right" specified for that pane.
After that found a simple solution of creating wrapper div inside each splitter-pane and set "box-sizing:border-box" and "padding:10px", which worked without issues.
Kendo has issues with box-sizing: borderbox. This post may help.
Basically I have a bottom bar that stores a definitive amount of objects, say 30, with a width of say 2000em.
Now I want to make this div scrollable but every tutorial I look at does not explain their calculation.
My scroller will be unique because I will only allow scrolling via a next and back button (basically like paging) and I need to calculate when the div has 0 space to move so I can AJAX load more items and of course this calculation needs to be resize safe (based on div width and not pre-defined numbers).
Now I am fine with the whole resize (recalc div width on resize event) and AJAX load more objects.
What I'm not fine with is the calculation required to understand how the div should scroll and how to judge when it has no more space to scroll.
Has anyone got experience with making a dynamic scroller that only acts uopn click of a next or previous button that could explain the calculation required to understand scrollLeft/Right?
Thanks for any and all help,
I actually sorted this by:
Taking the current scrollLeft() of the inner ul within the div wrapper and add on the div (wrapper) width.
I checked whether the sum from point 1 was less than the UL width.
If so then scroll otherwise load new page if there is one.
Reverse for the previous button.
Since the wrapper has a width of 100% specified it will always be the size of the screen which means no resize function needed.