does datatables add extra padding at bottom of table?
does datatables add extra padding at bottom of table?
Does datatables add extra padding at bottom of table?
I'm using JQuery UI in addition to Datatables.
The Datatables is within a tabs box, which is within a dialog. Mmm. Three layers. Inception. A subtle indication from my subconscious that I need to get some sleep and get to dreaming? 1:30 AM here.
Anyway, I digress.
Interesting part is: if I duplicate the table in a second tab, but without initializing it with Datatables, no padding appears. Removing initialization for the table in the first tab makes the padding go away. The reason why I know the padding is there is because the scroll bar appears.
It's the padding that is driving me absolutely insane. Well, not so much the padding as it is the scroll-bar.
I could kill it by doing overflow: hidden; but that'd introduce a new problem: what if the table expands vertically? Then the tab wouldn't expand. Thusly, the dialog wouldn't expand either. Ugly solution.
Now, my dear Alice, drink your tea and let me gimble off to wonderland to see if I can find the jabberwock. Looking forward to be hearing back from you.
I'm using JQuery UI in addition to Datatables.
The Datatables is within a tabs box, which is within a dialog. Mmm. Three layers. Inception. A subtle indication from my subconscious that I need to get some sleep and get to dreaming? 1:30 AM here.
Anyway, I digress.
Interesting part is: if I duplicate the table in a second tab, but without initializing it with Datatables, no padding appears. Removing initialization for the table in the first tab makes the padding go away. The reason why I know the padding is there is because the scroll bar appears.
It's the padding that is driving me absolutely insane. Well, not so much the padding as it is the scroll-bar.
I could kill it by doing overflow: hidden; but that'd introduce a new problem: what if the table expands vertically? Then the tab wouldn't expand. Thusly, the dialog wouldn't expand either. Ugly solution.
Now, my dear Alice, drink your tea and let me gimble off to wonderland to see if I can find the jabberwock. Looking forward to be hearing back from you.
This discussion has been closed.
Replies
Went in to inspect the elements, and the inner HTML for each element. Noticed the padding is here:
[code][/code]
Interesting thing is, I inspected each element inside that div-- it wasn't any of the elements inside that div (there are several div's, etc inside it).
So the padding I'm seeing is coming from something affecting either the class or id of dataTables_wrapper/myTable_wrapper.
edit:
Went in the code, did some experimenting-- it wasn't padding, margin, or height. It turned out to be the min-height property. Somewhere in the dataTables code, it's setting the min-height to 302 px-- which was resulting in the extra padding. Doing this:
[code]
#myTable_wrapper, .dataTables_wrapper {
min-height: 0px !important;
}
[/code]
Made the extra height go away and stop breaking the layout. It's now displaying properly. While I'm not sure where in your code it's setting the min-height, since it displays fine, I just shifted the CSS modification to my main.css to override the min-height setting for now. I'm sure I could hunt down the code you put into place to set the min-height-- but I'd rather hear from you as to why you set that particular CSS property for the wrapper before I start hacking away at your code. =)