jQuery datatable + Twitter bootstrap CSS issue

Question

I am having a very strange problem with the styling of the table that has attached jquery datatable on it. Can someone help me with this one? I put the page here:

http://aldee07.eu5.org/test/

PS: for the link above, please just ignore the javascript error and malfunction of the scripts. I am just concern with the CSS of that page.

Thank you very much in advance. I am really stuck with this problem.

look at domain for all the css url's looks like something from your localhost. Very easy to look in browser console net/network tab and see all the aborted requests. You might see the css loaded since those url's will work on your localhost. But url provided has no css at all for anyone else — charlietfl
– charlietfl, Commented Nov 4, 2012 at 14:26
i'm sorry for that.. now, its all updated.. can you see it again please? thanks.. — Aldee
– Aldee, Commented Nov 4, 2012 at 14:38
table width not set and is overflowing parent... is that what issue is? TD widths are set and add up to more than container — charlietfl
– charlietfl, Commented Nov 4, 2012 at 14:45

charlietfl · Accepted Answer · 2012-11-04 20:13:06Z

1

Your problem stems from bootstrap css sets input to default width of 260px which is too much for your table columns and is causing columns to be wider than script is telling them to be

This is not the 100% css cure but will show you the path to create a more robust css rule(s) to over ride the defaults.

After all the css link tags add the following:

<style type="text/css">
    input { width: 85%} 
</style>

Your table will shrink to fit parent and you just need to write some css improvements for the header input tags and perhaps <TH> padding . I would add a special class to row with the input elements and work from there. Also bootsrap API has different classes for size of input

DEMO: http://jsfiddle.net/PSvyz/

edited Nov 4, 2012 at 20:13

answered Nov 4, 2012 at 20:08

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aldee Over a year ago

excellent. it really solves the issue.. thank you very much charlietfl!

charlietfl Over a year ago

used browser console to inspect elements... the input's looked suspicious since they were only part that is non datatable standard. After that was easy to sort out. Doesn't take long and learning how to look at elements css is pretty easy

Collectives™ on Stack Overflow

jQuery datatable + Twitter bootstrap CSS issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related