Styling of the Length_Menu

schwaluck

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

kthorngren

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

schwaluck

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?

kthorngren

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

tangerine

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

schwaluck

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?

schwaluck

@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.^^

schwaluck

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!