Styling of the Length_Menu

Styling of the Length_Menu

schwaluckschwaluck Posts: 103Questions: 27Answers: 1
edited September 2020 in Free community support

Hello everyone,

I have just added the length_menu to my DataTable. Now the position did not suit me and I wanted to assign appropriate attribute-value pairs to the CSS class "dataTables_length" to correct this (see the following code snippet). Unfortunately this did not have any effect:

.dataTables_length {
    /*Example*/
    padding: 10px !important;
}

After that I inserted a div tag with the class "length" around the dom element. But assigning corresponding attribute-value-pairs to this class had no effect either (see code):

dom: 'Bfrti<"length"l>p',
.length {
    /*Example*/
    padding: 10px !important;
}

Am I missing a crucial detail why this does not work?

Greetings
Daniel

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Inspecting the element it has this CSS:

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #aaa;
        border-radius: 3px;
        background-color: transparent;
        padding: 4px;
    

    Using this to override seems to work:

    .dataTables_wrapper .dataTables_length select {
        padding: 10px;
    }
    

    See this example:
    http://live.datatables.net/hideqepi/1/edit

    Kevin

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1

    Hey Kevin,

    thanks for your quick response!
    Unfortunately this does not work for me. So it does not achieve any effect. In the following you will find my HTML structure and the corresponding classes:

    <div id="table_1_wrapper" class="dataTables_wrapper">
        <div id=table_1_length class="dataTables_length">
            <label>
                <select>
                    <option value="10">10></option>
                    <option value="20">20></option>
                    <option value="30">30></option>
                </select>
                Entries
            </label>
        </div>
    </div>
    

    Do you have an idea what could be the reason that no effect can be achieved?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Not without seeing it. You can inspect the length change element to see the CSS's that are applied. Right click on the element then click Inspect. Do you see your custom CSS?

    Kevin

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    If your HTML post was copy/paste, your table id needs quotes.

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1

    I have now discovered the following:

    When I click on the element and scroll through the CSS settings, the padding is not visible at first. But as soon as I deactivate the attribute "inline-height" with the value 1 at the body element via the Inspect function on the website and then click on the select element again, the padding, which was assigned via the selectors ".dataTables_wrapper .dataTables_length select" is displayed and it works.

    Do you have an idea what this is due to?

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1

    @tangerine No, I typed the code manually and probably forgot the quotation marks there, sorry. So that is sadly not the reason for the problem.^^

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1

    All right, I must have been searching at the wrong place. I had already deleted the cache and all other browser data, but apparently not completely. I guess it was because I only deleted the cache of the last four hours by using ctrl+shift+del command. Now that I have deleted all browser data, it works like a charm.

    Sorry for wasting your time and thanks for your help!

This discussion has been closed.