i'm trying to figure out how i could align the childs of a verticalPanel as i want.
I have a verticalPanel with 100% height which is added to center of a splitLayoutPanel.
When adding the first child in the verticalPanel it automaticaly aligns to the top.
After setting the hight of the child widget to for example 30PX and adding another child, the second one aligns to the top of the half hight of the verticalPanel.
I would like to be the second child (scrollPanel) aligned right under the first one considering the spacing and the scrollPanel should use 100% of the rest from the verticalPanel heigt.
Hope you can help me.
Try setting the height of the second cell to 100%, e.g.:
myVerticalPanel.setCellHeight(myScrollPanel, "100%");
Alternatively, you could replace the VerticalPanel by a DockPanel (or DockLayoutPanel) and add the first child north and the second child in the center.
What I think happening is this,
A vertical panel is implemented as a table when rendered, so when you set height of vertical panel to 100% it sets the height of the table to 100%. When you add an item to it, the 1st item is added to a which effectively takes up the 100% height, and inside that the added child is set to height 30px. Now when you add another child to the panel another is created. Now the vertical panel ie the table has two rows so it distributes the height equally ie 50% to reach row, hence you observe the behavior of getting added to top of half height.
A simple solution to this would be to use FlowPanel(with 10%% width and height) and have your child added to it take width as 100% and height for 1st child as 30px and 2nd child with width and height both 100%. Hope that helps you.
Related
I have a collapsible panel that was designed in a way that the children (green) are wider than their parent (red). Because there children have borders and there are icons added via ::before and ::after, when the whole panel collapses it borders on the children stay large until the animation on the parent is completed.
I can avoid these annoying lines from staying on the screen if I change the parent's overflow to hidden, unfortunately doing this clips the styling on the children and we don't get to see the elements the way they were intended.
Is there a way to keep the parent with overflow hidden and allow the children to have a width that exceeds the width of the parent? any tricks?
It looks like you are collapsing it horizontally and the problem is that the elements keep adjusting to the new width until the width stops transitioning to the new value.
If that is correct, you might need to change from using width to collapse the panel to transform: scaleX(0);. It should take care of child elements re-rendering and elements being visible after the width is zero.
As of now I have div A inside of div B, and A's height is set to 100% because I want it to cover everything from the start of it to the bottom of its parent div.
However, having its height set to 100% doesn't perform the way I was hoping (that it would simply span all the way from its starting point to the bottom of its parent), instead it sets its height to exactly match its parent div. Since div A starts a few hundred pixels down inside div B, this causes div A to overflow an extra few hundred pixels below div B.
Example below:
The real trick is that div B needs to be able to expand vertically depending on its content, while div A continues to fill the area from its vertical start to the bottom of its parent.
Is there some other method to consider? I understand that I could use the calc unit, however, calc doesn't work on safari up until safari 6, and that would rule out a lot of mobile devices.
I might be misunderstanding what you're trying to achieve here but wouldn't a
overflow:hidden;
on the Div B work out?
So here's what I want to do:
Let there be a fixed size column. The height of the column should take up the size of the parent.
Inside the column I have two divs, stacked vertically. The width of both of them takes up the column width. The height of the first div is fixed size. The second however is variable, taking up whatever remains from the parent. Moreover its content is variable. If its content is to large a vertical scroll bar should appear.
How can I do this with HTML and CSS?
Here's a quick JSFiddle POC.
My problem is that if I set the second divs height as auto it will stretch outside its parent. If I set it 100% it will be again larger than its parent. It's important that the scroll bar to appear only for the second div, not the main div itself.
Thanks,
Here is what I would do:
http://jsfiddle.net/Tfzhm/1/
Add position:relative to the container div, and make the scrollable div position:absolute. The top should be set to the same amout of pixel as the height of the first stacked div. And finally, set bottom:0px so it gets to the bottom line of the containing div.
I have a strange horizontal scroll, strange because I have a 100% width container.
Take a look at this link to see what I'm talking about
Remove the float and width from the triggers.
Your elements have width: 100%, which causes them to occupy the entire width of the page.
You're adding a border and padding to them, which adds to that width and makes them bigger than the page.
It's problematic to use width and padding at the same element.
Try to remove the width and additionally remove the float property from your h2.trigger class.
To summarize, I'm trying to get a "resizable page" both in the height and in the width of the window. I've two fixed blocs too. One on the top of the page and an other on the left (like the Flow app for example).
As you can see there, I'm trying to make the yellow part of the screen resizable (css only) but I get some trouble with the height part. The scrolling zone is always counting the height of the top bloc (the red one).
Is there a way to make it javascript free?
The div with id="container" has a height of 100%. This means 100% of the containing id='wrapper' div. One possible solution is to make the heights:
red part: 10% of the total height
blue+yellow (i.e. the "wrapper" div): 90% height
This would mean the "container" wrapper should nicely fill up those 90%.
Edit: only drawback would be that the red part is no longer a fixed hight pixel-wise.