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

slolo

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.

kthorngren

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

slolo

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?

allan

Yup, I'd welcome a pull request that implements that.

Allan