Position and dimension of the search box

Position and dimension of the search box

TerreTuxTerreTux Posts: 21Questions: 4Answers: 0

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

    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

  • TerreTuxTerreTux Posts: 21Questions: 4Answers: 0

    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?

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

    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

  • TerreTuxTerreTux Posts: 21Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925
    edited July 2022 Answer ✓

    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

  • TerreTuxTerreTux Posts: 21Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

    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

  • TerreTuxTerreTux Posts: 21Questions: 4Answers: 0
    edited July 2022

    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!!

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

    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

  • TerreTuxTerreTux Posts: 21Questions: 4Answers: 0

    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">
    
  • TerreTuxTerreTux Posts: 21Questions: 4Answers: 0
    edited July 2022

    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?

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

    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

  • TerreTuxTerreTux Posts: 21Questions: 4Answers: 0

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

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925
    edited July 2022 Answer ✓

    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

  • TerreTuxTerreTux Posts: 21Questions: 4Answers: 0

    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;
      }
    
  • taponsayeemtaponsayeem Posts: 1Questions: 0Answers: 0

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

  • allanallan Posts: 63,236Questions: 1Answers: 10,418 Site admin

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

    Allan

  • serhatkurtserhatkurt Posts: 1Questions: 0Answers: 0

    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{

    }

Sign In or Register to comment.