Replacing overflow with automatic resize of container

MadBoyEvo

Link to test case:

https://jsfiddle.net/MadBoy/3v1bxesa/

Description of problem:

When I click on Search Panes button, it opens up, but since the flexbox size is initially limited to whatever is displayed in the table it's basically cut off.

I've been told that it's because of overflow (lines 114-118)

.overflowHidden {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}

And when I remove overflow it does seem to work, but this impacts other parts of code heavily. Is there a way for me to resolve this without removing overflow? Maybe somehow force SearchPane that shows up to resize the container to include it's size?

sandy

Hi @MadBoyEvo ,

Take a look at this version of your test case. I've added the following css at lines 183 to 187.

div.dt-button-collection {
    position: fixed;
    width: 900px !important;
    margin-top: 0px !important;
}

The key here is position: fixed, it takes the popover out of your containers flow and therefore stops the overflow from affecting it. Adding the width and margin-top allows it to sit a bit more nicely on the page - you can fiddle around with those to suit your purposes better.

Hope this helps,
Sandy

MadBoyEvo

Thank you! This makes much more sense!

MadBoyEvo

I went with a bit different settings: https://jsfiddle.net/MadBoy/7vdL0on8/

div.dt-button-collection {
    position: relative;
    width: auto !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

This fits the search pane right under buttons, before the table, and resizes the container. I'll see if that will work for more problematic containers. Thank you again.