Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

max-height support #48

Open
matthieusieben opened this issue Mar 13, 2012 · 3 comments
Open

max-height support #48

matthieusieben opened this issue Mar 13, 2012 · 3 comments

Comments

@matthieusieben
Copy link

Hello,

Your pluggin makes the table container taller if its content is smaller than the specified height. could you add support for max-height ? Could this max-height attribute be inherited from the

parent ?

@buste
Copy link

buste commented Sep 13, 2013

+1

@marianopeck
Copy link

I am having this same problem. And what is worst is that if you need an horizontal scroll bar, and the table container is smaller than the specified height then the scroll bar appears way on the bottom....after a lot of empty space :(

@marianopeck
Copy link

In my case the problem was the following. I have lots of tables (reports), say 20 different tables. Yet, I use the same code for displaying them. Of course, at some point, I need a number to represent the hight for such tables, but I cannot made the too big and scroll because I may have several records. So say at some point I sadi: 'OK, height should be not more than 900px'. Perfect. But if I simply pass that value to the fixed table, it will use it as 'height' and I would use all the space. Sometimes, some of my tables may not that much rows, and hence, the space used by the table is less than 900px. Say it was 400px. So first, it is ugly that it uses 900px because 500px looks like empty. Second, what was worst in my case, for horizontal scrolls, they appear JUST AFTER the 900x ...quite far from there the table finished in this case (400px)...

So the way I solved it is to have my own div (tableContainer) and inside that div, the table. And then, add this css:

 .tableContainer {
max-height: 900px;
 }

 .fht-table-wrapper { 
max-height: 900px;
   }

But..I wanted to set this 900px from javascript, because I wanted to calculate that as an approx. 80% of the height of the browser window. So now before calling the javascript table I do:

    $(".tableContainer").css("max-height", (($(window).height()*0.8) +''px'') );
    $(".fht-table-wrapper").css("max-height", (($(window).height()*0.8) +''px'') );

But...I didn't work right ahead. I had to add a "max-height: inherit; " to the defaultTheme.css:

   .fht-table-wrapper,
 .fht-table-wrapper .fht-thead,
 .fht-table-wrapper .fht-tfoot,
 .fht-table-wrapper .fht-fixed-column .fht-tbody,
 .fht-table-wrapper .fht-fixed-body .fht-tbody,
  .fht-table-wrapper .fht-tbody {

max-height: inherit;    
.....

}

and there it worked as I expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants