DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Problem with SearchBuilder if nested in Card component (Bootstrap 4) at bottom of the page

Problem with SearchBuilder if nested in Card component (Bootstrap 4) at bottom of the page

sloloslolo Posts: 57Questions: 10Answers: 0
in DataTables 2

Link to test case: https://live.datatables.net/dijekeve/1/edit
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

As you can see on the test case, if SearchBuilder is at the bottom of the page and nested in Card component (Bootstrap 4), the pane is displayed incorrectly.

If you comment or delete the Card component and click on the Search Builder button, you can see that it is correctly displayed to the top.

Is there a way to avoid this behavior?
Otherwise, I hope you will be able to correct it in the next release.

Thanks in advance and have a nice day.

Answers

  • kthorngrenkthorngren Posts: 21,855Questions: 26Answers: 5,050

    You can inspect the dropdown menu div to see what styling is applied. You will find this CSS:

    .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

    One option is to modify the CSS to move the element up. Something like this:

    .dropdown-menu {
    position: relative;
    bottom: 400px;
    top: 100% !important;
}

    Need to add !important to override the default top value.

    https://live.datatables.net/dijekeve/2/edit

    Kevin

  • sloloslolo Posts: 57Questions: 10Answers: 0

    Hello @kthorngren,

    Thanks for your answer even if I find it a little bit ugly ;)

    This works fine when the DataTables is not inside a component, so I guess it's a small bug.

    Maybe we could have an option to force the pane to be displayed either at the top or bottom of the component, what do you think?

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.