Position and dimension of the search box

TerreTux

Hi,
I would like to know if I can enlarge the text box search and move it

kthorngren

One option is to use dom option to move the search input. You can right click on the element to find the selector to use to apply styling attributes you wish to change. You can also use this selector to move the input outside of where dom option can place it.

Kevin

TerreTux

I've seen that I can put this on css file

$.fn.DataTable.ext.classes.sFilterInput = "form-control form-control-lg";

If I want to put a specific width. How can I do this?

kthorngren

If you inspect the search element you will find something like this:

<div id="example_filter" class="dataTables_filter">
    <label>Search:<input type="search" class="" placeholder="" aria-controls="example"></label>
</div>

You can apply a CSS like this to change the width:

div.dataTables_filter input {
  width: 300px;
}

For example:
http://live.datatables.net/yepivofa/1/edit

Kevin

TerreTux

Thanks to your reply. But I don't where I can apply

div.dataTables_filter input {  width: 300px; }

I've to change the file dataTables.uikit.css

kthorngren

Place it within a style element on the page. You could place the CSS in dataTables.uikit.css but if you upgrade that file might be overwritten and you would lose you changes. You could create your own customer CSS file.

Kevin

TerreTux

Sorry but I didn't find

<div id="example_filter" class="dataTables_filter">
    <label>Search:<input type="search" class="" placeholder="" aria-controls="example"></label>
</div>

Where can I apply

div.dataTables_filter input {
  width: 300px;
}

Thanks in advance

kthorngren

Sorry but I didn't find

Right click on the search input element and choose inspect. You will see something like this:

Where can I apply

Create a style element on your page and add the CSS, like this. See the style element docs I linked to for details.

    <style>
      div.dataTables_filter input {
        width: 300px;
      }
    </style>

I updated the test case to show this:
http://live.datatables.net/yepivofa/3/edit

Kevin

TerreTux

I don't understand I added

I modified the CSS in app.css to added

 div.dataTables_filter input {
    width: 300px;
  }

it is not taken into account!!

kthorngren

You might want to read about CSS file formats, like this tutorial. I don't believe adding the HTML style tag in the CSS file will work. Try without the style tag. If you still have problems then please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Or just try adding the style tag to your HTML page as I showed previously.

Kevin

TerreTux

I placed the style tag directly in my HTML page and I didn't modify CSS, you can see in picture below that it's not taken into account

So it's difficult to reproduce the test case. I tried it, I added style tag and it's ok.
So I don't understand why it's not taken into account. I use bootstrap 4

<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="~/font-awesome/css/font-awesome.min.css">

TerreTux

I changed

<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

by the elements located in the head of the test case
```

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

```

With this changing the width of the input search it's taken into account.

What should I change in my case?

kthorngren

Without seeing the page to debug its hard to say specifically what the problem is. Its not a Datatables specific issue but rather a CSS priority issue. The CSS you added is overridden by another CSS, thus the strikeout line.

Maybe you need to add !important or find out what is overriding the CSS. The load order is important.

Kevin

TerreTux

Here you can find the test case which represents my html page
live.datatables.net/yepivofa/4/edit

kthorngren

Your test case doesn't run because you aren't loading datatables.js and the paths you supplied for bootstrap and font awesome are local to your environment. I updated the test case to load these files and the custom CSS is working.
http://live.datatables.net/calemevo/1/edit

What we need to see is a running test case that shows the problem.

Maybe you can start by removing, one at a time, the CSS includes to see if there is one causing the conflict.

Did you try adding !important?

Kevin

TerreTux

Yes I tried to add !important. There is no change;

"Maybe you can start by removing, one at a time, the CSS includes to see if there is one causing the conflict."

I remove the link

<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />

I put the link

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>

And In this case the le style is taken into account

<style>
  div.dataTables_filter input {
    width: 300px;
  }

taponsayeem

your css should look like this
<style>
div.dataTables_filter input {
width: 300px!important;
}
</style>

allan

@TerreTux - It looks like your account was accidentally caught by our auto spam filter. Sorry about that. I've unbanned it now.

Allan

serhatkurt

for Boostrap setting,

1. STEP
   open jquery.dataTables.css and find;

   .dataTables_wrapper .dataTables_filter {
                             float: right;
                             text-align: right;
                           }
                           .dataTables_wrapper .dataTables_filter input {
                             border: 1px solid #aaa;
                             border-radius: 3px;
                             padding: 5px;
                             background-color: transparent;
                             color: inherit;
                             margin-left: 3px;
                           }
   

edit/change

.dataTables_wrapper .dataTables_filter {
  float: none;
  text-align: center;
}
.dataTables_wrapper .dataTables_filter input {

  background-color: transparent;
  color: inherit;

}

1. STEP
   open jquery.dataTables.js and find;

"sFilter": "dataTables_filter"

"sFilterInput": "",

edit/change (add Boostrap class)

"sFilter": "dataTables_filter row"
"sFilterInput": "form-control rounded p-2 custom_css_style",

1. STEP customize the Css style you added

.custom_css_style{

}

matanox

Looks like the search box class name has changed to dt-search by now. Yet I haven't quite gotten it right yet, the following does not work.

            <style>
                /* Center-align the DataTables search box and style it */
                .dt-search label {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 1em; /* Optional: Adds space below the search box */
                }
                .dt-search input {
                    color: blue;              /* Text color in the search box */
                    border: 1px solid blue;    /* Border color of the search box */
                    background-color: #f0f8ff; /* Light blue background (optional) */
                    padding: 5px;              /* Adds some padding for better appearance */.dt
                }
            </style>

I've installed datatables with the Bulma styling option, if it matters. What do I need to know to get this fluently working in center-aligning (and changing the colors) of the search box and label?

matanox

Also is there a way to make the table squeeze its columns to the center rather than spread them from side to side across the full width of the display area, when the number and content of columns is small enough to leave a lot of gaps between the columns with the active font?

I'm already using the compact class, but it doesn't seem to do that itself.

allan

Looks like the search box class name has changed to dt-search by now.

Yes, that was a change in v2 to make the class names a bit more consistent.

What specifically are you trying to do with the search box? If you want it centered above the table use layout:

layout: {
  topStart: null,
  topEnd: null,
  top: 'search'
}

Also is there a way to make the table squeeze its columns to the center rather than spread them from side to side across the full width of the display area

Disable the autoWidth option and add style="width: auto" to the table, should do it I think.

Allan