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.
Related
I am working with jScrollPane to create a custom scrollbar. I have a bunch of div's that lineup horizontally. For some reason, when I use percentage instead of a fixed width, the scrollbar does not show up, but if I change it to a fixed width it will work.
Percentage
.productsimilarproduct {
width: 30%;
margin-right: 1%;
}
Fixed Width
.productsimilarproduct {
width: 288px;
margin-right: 10px;
}
This issue isn't listed in the known bugs for jScrollPane, so I thought I'd post this up on StackOverflow to see if anyone knew of a solution.
Is there anyway for me to set the width of my div's to a percentage and still use jScrollPane?
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.
I used this template to create an accordion in Bootstrap.
I will probably have a lot more elements and can't figure out how to set the max height for the menu before the contents of the sublinks div become scrollable, since I have a limited window.
JSFiddle
I already tried applying max height to both #menu and the .list-group.panel
Here's an example of how to get your scrolling working with the code you've provided.
div.sublinks.collapse {
max-height: 200px;
overflow-y: scroll;
}
http://jsfiddle.net/bjpLL5xn/3/
The issue you'll run into is that when expanded the Javascript is going to make the animation "jump".
One item is 38px so you can set a max-height to the .sublinks div to the amount of divs you want to be shown so if you want two make it 76px or you want 3 make it 114px so on so on. Also i added overflow: overlay; so you won't see the items outside the accordion bit it still adds a scrollbar.
Jsfiddle
.panel-group .panel+.panel {
margin-top: 3px !important;
max-height: 90% !important; //90% height of your parent div and if it crosses y-axis scroller will be shown
overflow-y: auto !important;
}
Always use % and not px... you will have resolution issues later.
I'm building some sort of reporting-functionality where the user can select a number of elements to be part of the report.
The number of possible elements can vary depending on the users needs.
Also the content for each element can vary as of this is user-content.
The report(s) can be printed via browser, exported as pdf or just previewed in browser. It's also possible to set landscape/portrait mode to get what fits the needs best.
Question: Is there any way to make the table always 100% width (e.g. DIN A4 size for printing) and have the column-widths matching there content overflowing at some given point?
If I set the table-style to
.reportTable{
width: 100%;
min-width: 100%;
max-width: 100%;
}
and the style for th to
.reportTable th{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
the rendered table has the correct size and all columns the same size with it's content hidden in case it is too long.
And here is the problem. If one column only shows a number it takes the same space as the column showing the name of an user. For printing (where space is not infinite) this is lost space which can be used for other things which may get cut off.
Changeing it to
.reportTable{
width: auto;
min-width: 100%;
max-width: 100%;
}
will size the columns depending on the content. But, if the content is too long, the table will be bigger than 100% (some kind of out of bounds).
Is there any way doing this with pure css or do I need javascript/jQuery (which for sure is an option)?
No plugins or something external.
You may keep table width at 100%. whatever screen size be there it will set as per resolution. for th table header define width in "%" so that it can take width of column in that proportion. If numbers are in td set respective th at lower width %.
.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.