Move searchbar on the left and make it occupy 100% of table's width

Move searchbar on the left and make it occupy 100% of table's width

n00bCod3rn00bCod3r Posts: 5Questions: 1Answers: 0
edited March 31 in Free community support

Hello, I've read many questions before asking this, I tried the solutions I found (using "dom" and setting custom float-left and float-right for certain classes in CSS file) but I didn't succeed. My table:

http://live.datatables.net/buhabeca/3/

I'd also like "Name" th to be centered, but only it: I tried using bootstrap classes (text-center) but they don't seem to work :s

And a minor question, if I wanted the first column of fixed width, would I need to type

{ "targets": 0, "orderable": false }
{ "targets": 0, "width": "10px" }

or would this work too?

{ "targets": 0, "orderable": false, "width": "10px" }

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 51,750Questions: 1Answers: 7,832 Site admin
    Answer ✓

    This is the CSS you'll want to make it 100% width:

    div.dataTables_wrapper div.dataTables_filter label {
      display: block;
    }
    
    div.dataTables_wrapper div.dataTables_filter input {
      width: 100%;
      margin: 0;
    }
    

    http://live.datatables.net/levovefu/1/edit

    I've also used placeholder text rather than a label outside of the input to allow it to be truly 100% width.

    I'd also like "Name" th to be centered, but only it: I tried using bootstrap classes (text-center) but they don't seem to work

    It does, but there is some padding-right which is knocking it off center. This is a workaround:

    <th class="text-center" style="padding: 4px 3rem;">Name</th>
    

    We need to update DataTables / Bootstrap styling to have that built in really (for columns which don't have sorting on them which is what is causing the issue here).

    Allan

  • n00bCod3rn00bCod3r Posts: 5Questions: 1Answers: 0

    Hello, the first solution kind of works, but on my table it's still on the right, the problem is that first empty div that has col-md-6 class preventing the div containing the search bar to occupy 12 spaces (in fact on small screen sizes I correctly see it). I don't know how to get rid of it

    The second option works, I had to remove "3rem" tho because the "lang" column was too wide otherwise, the 4px does the job!

  • n00bCod3rn00bCod3r Posts: 5Questions: 1Answers: 0

    BUMP

    I thought it was a problem that occurred only on my site but if you resize the window on the link you have provided you'll see that it happens there too for md and above breakpoints. Any suggestions on how to fix it?

  • colincolin Posts: 8,661Questions: 0Answers: 1,449
    Answer ✓

    As Allan said, we'll need to update the styling. I've raised it internally (DD-1401 for my reference) and we'll report back here when there's an update.

    Cheers,

    Colin

  • n00bCod3rn00bCod3r Posts: 5Questions: 1Answers: 0

    Oh okay, I thought he was referring the padding problem, thanks :)

Sign In or Register to comment.