actually i want to set min height of chart excluding legends, my problem is when i choose small screen then legends are coming in one line and it will take lots of height and chart height is very small. so i am trying to do is that chart minimum height is remaining and if legends are more then it will take space accordingly. i know about legends scrollable give max height and setting scrollbar, but i want legends showing without scrollbar and chart min height is also showing, it is not an issue if graph is going big
actually i want to set min height of chart excluding legends, my problem is when i choose small screen then legends are coming in one line and it will take lots of height and chart height is very small. so i am trying to do is that chart minimum height is remaining and if legends are more then it will take space accordingly. i know about legends scrollable give max height and setting scrollbar, but i want legends showing without scrollbar and chart min height is also showing, it is not an issue if graph is going big
I only want to replace the color of scroll bar,is that possible?I saw all of this(https://css-tricks.com/custom-scrollbars-in-webkit/) settings but using them, I couldn't find a way to just change color,I needed to set a scrollbar width to see any changes and then the whole website is moved to left by a scrollbar width.
I have a website that is responsive and when you scale the site down. The site looks good, but if you scroll to the right there is a blank space because the nav-bar is 1000px wide.
When the site is sclaed down to tablet or phone the nav folds into a special mobile nav but the div from the larger site still remains.
My question is what can I do to make that div scale down with the rest of the site?
You'll see what I mean if you look at the site.
Glacialpace.com
use % for the navbar unit instead of pixels this will allow it to also scale down with the site. also remember to add auto margin to the right and left of the navbar
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%
If you go to Brit.co, you'll notice the sidebar container floats inside the main page container. This allows main page content that is below sidebar content, to wrap under the sidebar.
Explain in different way: A super high WordPress website, say 3,000 px in height, where the sidebar is only 1,000 px high, there is 2,000px of white space under the sidebar container. I'm trying to eliminate that.
Now, I can add container (e.g. footer) under both main content and sidebar wrappers (DIVs), but this is not being done at brit.co.
Sorry, this has us baffled. Normally not an issue b/c our WordPress sites are not that high. Would like to know if there are easy solutions!
Thanks!
it seems like it's just float:right in CSS?