Dynamically re-sizing the div can be done using display:table in div css properties, but the tricky part is controlling it to certain height as the tables can be large and giving it vertical scroll.
So my question is how to limit the height even after applying display:table.
Have you tried adding a max-height to the div?
div {
max-height: 300px;
overflow: auto;
}
You could then add overflow auto to make the content within the div scrollable.
Related
I have a Bootstrap table where the columns are toggled. Due to the number of columns, I need to use horizontal flow to make it all fit inside. However, the size of the header and the column itself gets too small to a point that it's unreadable. So I have to set up a minimum width for each column.
So, the columns should be in the whole table length at all times, and adapt the size to fill it all. However, when I am using the fixed minWidth and there are not many columns, the columns do not resize to fit the whole table. In the image below, the red square should not be appearing, but filled with the columns.
I have created a sandbox link with the table that does not resize correctly.
https://codesandbox.io/s/eloquent-almeida-9lgp2?file=/src/index.js
I have searched stack overflow to help me with the horizontal overflow, this is the CSS I have used to do so, by the way. I think this is the reason why the columns are not resizing as they should.
#table-employee-compensation {
overflow: auto;
display: block;
width: auto !important;
table-layout: auto !important;
}
Thanks for your time to read this!
I have solved by adding overflow: auto to .react-bootstrap-table, removed width: auto !important; and changed display: block; from the #table-employee-compensation class. Working as intended.
How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:
HTML:
<div class="example">
</div>
CSS:
.example {
height: 100px;
width: 10000px;
background-color: black;
position: absolute;
overflow: hidden;
}
Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.
Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.
You can set overflow: hidden on the elements container. In this case it's the body.
body {
overflow: hidden;
}
You're nearly there!
Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.
You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.
As you mentioned in your OP, you want to hide horizontal scrollbars.
For this, you would need to set
overflow-x: hidden
But (as mentioned), be sure this is on the parent container of .example.
This could be the body, or another div etc. HTH.
e.g.:
body, .parent-container {
overflow-x: hidden;
}
You can use overflow-x: hidden in CSS to hidde only horizontal scroll.
I have a div called list which is getting its content from database.
I have set the vertical scroller such that whenever its height exceeds 100px,it will use scroll bar.
Now my problem is when the content of the list gets empty or less than 100px,it is setting to same height of 100px .I want the height of div dynamically as per the content of it and at the same time use vertical scroll bar whenever its height crosses 100px.
#list {
height: 100px;
width: 1100px;
overflow-x: hidden;
overflow-y: auto;
}
Any help will be highly apreciated
Use max-height:100px instead of height:100px.
You can see the difference here: jsFiddle example. Chop the text down to see the div shrink.
height:auto;
max-height:100px;
.suspensionTableScroll {
width: 100%;
height: 180px;
overflow: auto;
}
I have the above CSS. the table is 180px which is good but the data inside it is not aligned to the top. rows are added in the middle with a large height that gets smaller as I add more rows.
How can I make their height auto depending on their content text?
I have tried vertical-align:top and vertical-align:text-top but the rows still appear in the middle
Maybe you want to set height of outer element in which you place the table instead?
Update:
table cell heights are adjusted automatically and dependent on the table height.
use max-height instead of height, so table cell heights will be dependent on their contexts and your table height won't be more than 180px.
This is kind of a really nooby question, and I think I already know the answer, but:
Can you add Scrollbars to the side of a <div>?
CSS
div {
height: 100px;
overflow: auto;
}
jsFiddle.
You give an explicit height so the div doesn't expand to fit its content.
If you only want horizontal or vertical scrolling, use overflow-x and overflow-y respectively.
If down the track you want the extra content to be hidden, use overflow: hidden.
The default for overflow property is visible.
Css:
overflow:auto;
or force the scroll area even when content doesn't overflow by:
overflow-y:scroll;
This will add scroll bar in a div
<div style="overflow:auto; height:556px;width:564px;">
</div>