I have a canvas containing a datagrid. I set horizontal and vertical scroll to 'off' for the canvas, and set both to 'auto' for the DG. This works until I have a larger number of columns in the DG (>=16), then the vertical scroll bar doesn't appear. Anyone seen this and, better yet, have an answer?
Found a simple solution, if not an answer. The outer container was specified with fixed height and width, and the inner DG was set to 100% height and width. Setting the DG height and width to fixed values a bit smaller than the outer container did the trick. Still, it seems "100%" should work.
Related
I'm trying to stretch the div container to fit the whole window. However whenever I set the width and height to 100%, I still get vertical and horizontal scroll bars that barely scroll anything. Hiding it with:
overflow:hidden
hides it but then the border on the right and bottom are missing. I want the div to fit exactly as the size of the window.
http://jsfiddle.net/pqDQB/
What I tend to do in situations like this is tinker around with the unit I am using.
Step 1: Make sure your content doesn't have any padding or margin that causes your issue.
Step 2: I recommend setting your width to width: 100vw and height to height: 100vh. This stands for viewport width and viewport height and will expand your div to cover the whole screen when both are set to 100.
EDIT
I have fixed the whitespace behaviour by resizing components within the VerticalPanel, that seem to have had an effect on the panel's dimension somehow missed by the console. I don't quite understand how.
However, I am still stuck with none of my panels showing vertical scroll bars.
In a GWT project, I have the following structure:
Page
DockLayoutPanel
North (header)
Center (body)
South (footer)
/DockLayoutPanel
Body
SplitLayoutPanel$1
West
SplitLayoutPanel$2
North
Center
TabPanel
ScrollPanel
VerticalPanel
-Several widgets-
/VerticalPanel
/ScrollPanel
/TabPanel
/Center
/SplitLayoutPanel$2
/West
Center
/SplitLayoutPanel$1
My problems are with the ScrollPanel in the TabPanel, which in itself contains a VerticalPanel containing several widgets. This is true for each Tab in the TabPanel.
My problem is that, while the width's for all containers in SplitLayoutPanel$2's center have 100% width, the ScrollPanel contains a horizontal scrollbar with a considerable white area next to it's VerticalPanel, while they are in absolute metrics the same size.
Illustrating the situation
This is the TabPanel, with ScrollPanel, and VerticalPanel. Notice how the horizontal scrollbar exists, while the TabPanel, ScrollPanel and VerticalPanel have the same width. Scrolling to the right yields a white area.
The ScrollPanel and VerticalPanel all sport an absolute width of 598px. The West component of the DockLayoutPanel has a size of 600, so that matches. Also notice how bringing up the developer console has made the scrollbar disappear. In fact, the entire panel has disappeared behind it, and no vertical scrollbar pops up.
When scrolling the bar to the right, the VerticalPanel gets partially placed off screen, and the ScrollPanel shows this whitespace. Obviously, I don't want the whitespace to be there, so there won't be need for a scrollbar at all. All panels in this situation still have the same width: 598px. Resizing the SplitLayoutPanel, using the border to the right, increases these values (obviously), but the panels do still share equal width and the whitespace remains the same size, while I'd expect it to get wider too.
The second tab contains a load of text, which continues off the screen, but no scrollbars appear.
Problem conclusion
No vertical scrollbars
A horizontal scrollbar with some magically summoned whitespace
Compontents claim to have equal width
Any help is greatly appreciated.
EDIT
Have tried resizing the VerticalPanel to 90 or 80% width. The whitespace seems unaffected and it shows that 100% really covers the visible width and not more.
TabPanel (at least the one from GWT proper) resizes from the inside-out: its size varies depending on the size of the selected tab. So your ScrollPanel will never have a vertical scrollbar unless you explicitly give it a size, and your content is actually overflowing the layer of the SplitLayoutPanel you put the TabPanel in.
Layout panels, such as TabLayoutPanel, on the other hand resize from the outside-in: the SplitLayoutPanel would set the size of the TabLayoutPanel in its center region, and the TabLayoutPanel would in turn set the size of the ScrollPanel, so if the content of the ScrollPanel overflows, a vertical scrollbar appears.
First Point : Don't mix and match layout panels and non - layout panels.
Second Point : If you want proper resizing and scrollbars, always try to mention width and height in percentages.
I see that you have mentioned width to be 100%. But what about the height?
What I suggest for you is,
Change TabPanel to TabLayoutPanel
Set all the panels height throughout the heirarchy as 100%
I have an element which I want to have width: 50%. But when the right scrollbar is there, that 50% looks different than before, and since certain elements appear and disappear (through animation), the scrollbar also appears and dissapears, dynamially changing my element's width.
See the Live Demo
Is there any way I can set an element's width with a percentage and not have it influenced by the presence or absence of a vertical scrollbar?
You could make width adjustments to accommodate the scroll bar on the click, but if you are going to have a lot going on that may cause this to occur, it would probably be best to just put...
body {overflow-y: scroll;}
...and have the vertical scroll bar always be present. See http://jsfiddle.net/htWrC/1/
You could do something like this
Check if the height of the div is taller than the height of the window.
If so, there is a scroll. Set the width slightly wider to account for the scrollbar.
Code
$('button').click(function(){
$('p').toggle();
var a = $('#box');
if(a.height() > window.innerHeight){
$('#box').css('width', '51.7%');
}
else{
$('#box').css('width','50%');
}
});
Example: http://jsfiddle.net/htWrC/2/
Probably a silly question but, what is the actual height of a container in Flex without scrollbars? Height and measuredheight seem to tell me what the visual height of a container is, but I want to know that number plus any height that is being 'hidden" below a scrollbar.
Thanks.
You can get the height with this:
box.mx_internal::getScrollableRect().height;
HBox and VBox always resizes to it's children if I remember correctly. So the height/width property will always be that of the content within it.
As for SWFLoader, it acts more like a Canvas. If you want to get the width/height of the content, just use the contentHeight/contentWidth property. The height/width of SWFLoader should be the size of the "Canvas" and not it's children.
I believe for the scrollbar itself, only certain components do that (like canvas), and I believe the algorithm to add the scrollbar is along the lines of if contentHeight > height => add vertical scrollbar. The HBox and VBox shouldn't ever get a scrollbar, unless you specify the 'clipContent' property to true. I personally would steer away from using that and instead just wrap it in a Canvas.
How do I create a scroll in GridView using ASP.NET without using fixed sized div's around it like shown here http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx .
You can set the div's width or height to a percentage as well, and with overflow:auto, the div contents will scroll if the browser is sized to less than the content.
Without any size settings, your div will simply expand to hold all content, so a percentage, fixed, or inherited size in at least one dimension is required for scrolling to ever occur.
In order to get a scroll bar, you need a fixed height container with overflow set to scroll.
Whether you do it with the grid's properties, like in the example you linked, or by just wrapping it in a Panel with a height and overflow set on it, it doesn't matter much. The key thing is just to get it inside a fixed height container. How you want the UI to look (where the scrollbar is, etc.) will dictate where you create the div.