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.
Related
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.
So you have a set of inline divs. Their width is hard coded but the content inside can be changed meaning the height of the divs are different.
Is there any way to enure that all divs remain the same height, without having the danger of content spilling out its parent div?
I've tried inheriting min-height but it seems that this is not dynamic. So if the parent div has a min-height set to 320px and the sibling divs are inheriting this value, if any sibling were to become higher than 320 because of content, it and the parent div will change, but the other siblings will stay at 320.
Is there any way around this without the use of anything other than css?
Simply make use of CSS' table display.
Take the following example markup:
<div>
<figure>Example one</figure>
<figure>This is example twooooo</figure>
<figure>3</figure>
</div>
If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:
div {
display:table;
}
div > figure {
display:table-cell;
}
All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.
Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.
For browser support, see: http://caniuse.com/#feat=css-table
I have a parent element with some child elements. The child elements have a min-width set, but the parent does not. When the browser window is smaller than the min-width, the child elements are the correct width, but the parent keeps getting smaller, causing the children to overflow. Is it possible to force the parent to be at least as wide as the children? (without using javascript)
http://jsfiddle.net/Psczr/
(drag divider most of the way to the right and then scroll right in the result window)
Set the min-width on the parent and on the child inherit ... but the parent of the td in your script is not the div but the tr ... the parent of the tr is the table ... and the parent of the table is the div.
http://jsfiddle.net/Psczr/12/
Your issue in this situation is that you're using a relative width for the parent and a fixed min width for the children. The solution you're trying to handle is not possible in straight CSS. You should instead use relative widths for all elements or establish a fixed min width for the parent.
I am trying to stretch div as soon as some text is loaded.I am able to do that by giving min-height:140 px and height:100% to its parent container. But content in my div is crossing its parent container. How can I limit the inner div so that it will not cross its parent container.
Please help me as I am trying for it from so long.
thanks in advance
HP
Use the overflow attribute in your CSS.
#myDiv {
overflow:auto;
}
Depending on the width you assign, this will get the nested div to display a scrollbar once it's width exceeds that of its parent.
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
overflow:auto;
Reference
w3schools
css tricks
By default the height of an Flex Accordion container is the height of the initially selected child. I'd like to be able to set the height to the tallest child so that no resizing or scrolling is necessary when other children are selected.
I do not want to use the resizeToContent property. I want the size of the container to stay constant no matter what child is selected.
My current thought is to extend the accordion class setting the creation policy to "all" and then override the measure function to loop through all the children and find the tallest one and use that for the height. This seems a little kludgy though, so I'd like to know if there is a better approach.
Ultimately my question is: is there a way to set the size of an accordion container such that the container never resizes and scoll bars are never necessary to display any of the children?
IMO your idea is probably the best way to go, one problem with it though, you're still going to have a scroll bar since it will set the height to the child and not take into account the chrome of the accordion. So you will need to add additional height for each header of the accordion.
Simple to figure out the header height and multiply it by the number of children, but still something you should keep in mind.