Bootstrap-table: Adjust table dynamically until fixed size

[marccollin]

i have a basic table

<table id="table" data-search="true" data-show-columns="true" data-pagination="true" data-height="250">
...
</table>

when we put a value for height, table seem to take this space as if there is only element...

Is it possible to take all the height only when there are enough element in the table?

[dabros]

@marccollin - have you tried using css to just apply a 'min-height' rule to the table?

something like:

``` css

mytable{ min-height:200px; }

``````

this might not translate perfect from size you using already, worth hitting F12 to check where data-height actually applying to, but mixing that and a 'max-height' value will acheive your desired result.

Just play with the values till your happy (i suggest in F12 elements view so real-time tweaking).

[wenzhixin]

Do you mean the same feature with #410

[dabros]

@marccollin - please update us on whether this solved your issue, and then close this if it did.

Also please answer @wenzhixin question

[marccollin]

@wenzhixin, ya it's the same feature.

[xyluet]

i have same issue with this
i want to make fixed header, so i have to use data-height in my HTML right ? for example data-height="300".
but if there is only one row, there still some space below, according to the height, how to make like max-height for this ?

[dabros]

@xyluet

If you tried prescribed approach and height option in plugin itself to no effect, then please either:

A. If EXACT same issue, post here but provide more info, OR
B. If AT ALL different, open a new topic, linking to this

Either way, you need to provide a Fiddle and we can help you more, dummy data from js array is fine (just needs to replicate core issue).

Examples and guide provided below:

• https://github.com/wenzhixin/bootstrap-table/blob/master/CONTRIBUTING.md#bug-reports
• #1765

[xyluet]

if i specify data-height and only 1 row, there will be expand some space according to specified height. How to make like max-height ?

[dabros]

@xyluet - see my last post again, we need a fiddle

[xyluet]

@dabros http://jsfiddle.net/e3nk137y/7806/

[dabros]

@xyluet

Played with it for a while, but put simply, if you use the data-height option then that is the HEIGHT of the table, regardless of whatever else you do. You can definitely style the table so that its not so obvious, but it will always stay that height.

If you remove the data-height then it will autosize perfectly well, though it does risk becoming massive if large dataset. If you have big tables and DONT want to use data-height but DO want to restrict the max height, just use pagination

Overriding the max-height on any level inside the table causes too many complications, though you could always have a scrollable wrap you do lose the fixed-header as you mentioned earlier

http://issues.wenzhixin.net.cn/bootstrap-table/#options/client-side-pagination.html

Problem solved

[xyluet]

@dabros

Okay, I take your suggest. Big thanks for the response

[fanshaoer]

@xyluet hi,dude,did you find the solution about the height when use table-fixed.thanks

[sqiva]

@fanshaoer

http://jsfiddle.net/dndph7c3/1/

You can dynamically set the height using that function. You can check if the height is greater using get height or count the data and dynamically set the height.

[fanshaoer]

@sqiva thank you.it sounds good,also it will be more convenient if some feature "data-height-flexible" exists.still thanks!

[nysmoon]

@xyluet here is your updated fiddle http://jsfiddle.net/dhvddove/1/

Adding these CSS styles solved it:

.fixed-table-container {
    border: none;
    height: auto !important;
}

.fixed-table-body {
    max-height: 400px; 
}