Replacing overflow with automatic resize of container

Replacing overflow with automatic resize of container

MadBoyEvoMadBoyEvo Posts: 119Questions: 38Answers: 0
edited March 2021 in Free community support

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?

This question has an accepted answers - jump to answer

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    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

  • MadBoyEvoMadBoyEvo Posts: 119Questions: 38Answers: 0

    Thank you! This makes much more sense!

  • MadBoyEvoMadBoyEvo Posts: 119Questions: 38Answers: 0

    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.

This discussion has been closed.