I am trying to disable the stretching of widgets in my QScrollArea's vertical layout.
I would like to have a scroll area which resizes it's contents horizontally to fit the scroll area's width (so that the whole widget is visible), but has a scrollbar vertically if needed.
I only managed to achieve this by setting my widgets width so that it fits without a horizontal scrollbar getting added.
I have a web page with two panels. The left panel takes up the majority of of the width and displays user posts. The right panel is a navigation menu so I want it to remain fixed and never roll off the screen.
When there are too many posts to fit on one screen, a scroll bar appears on the right of the screen (NOT the panel), and the user scrolls down. This is all good, except that the navigation menu scrolls off the screen.
Both panels are within a common div. I tried setting its position to relative, then making the nav panel position fixed, with a right offset of 0. This kept the nav panel on the screen, but on the far right (ie. not within the containing div).
How do I go about keeping the nav panel fixed on the screen, but floated to the right of it's containing div?
Thanks a million!
EDIT: For and example of what I mean, look at Facebook. You'll see that the posts column can extend on forever, but the right hand column (with the advertisements) stays on the screen...
You could use the Twitter Bootstrap Affix JS plugin:
http://twitter.github.io/bootstrap/javascript.html#affix
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 a fixed position side tab on my page that contains filtering options for the user. When there are a lot of options, the side tab gets too long and the bottom goes beyond the bottom of the page, where it is impossible to view.
Is there a way to have the whole page continue scrolling to the bottom of the side tab div? I don't want to put scroll bars inside my side tab div, even though that would be an easy fix. I just want, when the bottom of my div butts against the bottom of the page, to bring the whole div up with it so that the bottom content is visible.
I am limited in that I can't use jQuery in this particular application. I can, however, use Dojo.
I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.
So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.
If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.
Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?
Thanks in advance!
I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.