CODEWITHSUNDEEP
cssbootstrap-4overflow
szkut
szkut

Reputation: 381

overflow container with bootstrap 4

My aim is to create a container that have overflow x and overflow y with auto because what ever I will render there (large tables) the client should see a "window" with scroll able content + it will be greate if that contaner works with bootstrap 4 col and row. I don't wanna hardcode height and width.

I thought that code should work, but it doesn't

.overflow-table {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.overflow-table .row {
    display: block;
}

<div class="overflow-table">
    <div id="dvData"></div>
</div>
<!-- to dvData I render at code behind table--> 

<div class="overflow-table">
    <div id="dvData">
         <table class="overflow-table"> <!-- I try too something like this-->
    </div>
</div>

Thanks!!

solution

Upvotes: 1

Views: 1619

Answers (1)

nickfindley
nickfindley

Reputation: 310

Set a max-width and max-height on the div around the table. Use vw and vh units or percentages to avoid hard-coding width and height.

.window-overflow {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 95vh;
    max-width: 100%;
}

https://codepen.io/nickfindley/pen/QzGWPb

Upvotes: 1

Related Questions