I am working on making a scrollable list. I have a div whose height is based on a percentage of the parent div. Inside I am going to map a number of list items. I can't seem to get my div to scroll however when I use the flex property.
What is happening instead is that the list items are being shrunk in order to fit into the div.
Here is an example
https://codesandbox.io/s/fervent-rgb-bd95or?file=/src/styles.css
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.
The situation is a jqGrid inside a div where the size of the grid is larger than the div both vertically and horizontally. The goal is to have the column headers scroll left and right with horizontal scroll, and also keep them always visible when scrolling vertically.
It is easy enough to add CSS to have both scrollbars by setting overflow-x: auto to the div containing the jqGrid and overflow-y to auto for the ui-jqgrid-bdiv.
The problem with this technique is that the vertical scrollbar is only visible when the grid is scrolled horizontally to the right enough to show the right side of the grid. Making the ui-jqgrid-bdiv scroll and using DOM manipulation to set the sizes of the containing elements results in both scrollbars being visible, but the body content scrolls without scrolling the column headers.
There is a similar stack overflow question JqGrid add vertical scroll with horizontal scolling, but the answers do not address this.
It doesn't look as if there would be a pure CSS solution given the DOM structure of the grid. Is there a JavaScript solution out there, perhaps one listening to scroll events?
You could set the height and width property of the grid itself so that the grid will take care of the scrolling instead of the div that it is nested in. Set the dimensions to be the same or slightly smaller than the div's.
<div style="height:200px; width:100px;">
<table id="grid"></table>
</div>
<script>
$("#grid").jqGrid({
height: '200',
width: '100',
shrinkToFit: false //Tells the grid to let columns go to set size
//Add all your properties
});
</script>
OR
if you can get away with not setting the width and height of the parent div, you can just set the grid's dimensions like shown above. As long as the grid's properties are set to a certain size, it will make it's own scroll bars if the data is outside of those bounds.
jsFiddle
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 textarea (asp.net multiLine TextBox) wrapped in a few nested divs. When re-sizing the textarea, it expands over all of the other elements. This is not the case when wrapped in a table, as it pushes the surrounding elements down and right to accommodate the re-sizing. How do I get this to work in a div?
I'm not a pro with CSS, but I've tried relative position on the contained child div, but this just makes the textarea hide all the other elements as it expands. I can use a table, but I'm trying to get away from tables for layouts.
I've expanded outer divs to accommodate the content of inner divs with relative positioning, but it doesn't seem to work here. Also, the overflow effect is not desirable.
You can achieve the same result (like a table) in a div using
div{
display:table;
}
Here is a fiddle.
I have a list inside a VDividedBox. When the box is resized so the vertical scrollbar shows on the list, it covers some of the itemrenderers. How do I get the list to resize horizontally so that the scrollbar does not cover the renderers?
Actually, I'm fairly sure it's not the list scrollbar that's showing, but the VDividedBox's, hence why it's covering the list. It's a known bug in Flex 3. If I were you, I'd set the height of the list at 100% and remove the scrollbar by doing horizontalScollPolicy="off" on the VDividedBox.