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

[Deleted User][Deleted User] Posts: 5Questions: 3Answers: 0
edited March 2020 in Free community support
The user and all related content has been deleted.

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 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

  • [Deleted User][Deleted User] Posts: 5Questions: 3Answers: 0
    The user and all related content has been deleted.
  • [Deleted User][Deleted User] Posts: 5Questions: 3Answers: 0
    The user and all related content has been deleted.
  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    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

  • [Deleted User][Deleted User] Posts: 5Questions: 3Answers: 0
    The user and all related content has been deleted.
This discussion has been closed.