Bootstrap Panel with horizontal scrollbar - html

Question

Been going round & round in circles. I've got a Bootstrap 3 panel and within the panel-body I'm adding divs dynamically (MVC razor) which are stacked:
.test-result {
float: right;
width: 150px !important;
height: 100% !important;
border: solid 1px;
min-height: 100% !important;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
white-space: normal;
}
Once these exceed the width of the panel-body they obviously start stacking etc.
I want the panel-body content to stay side by side and to have a horizontal scrollbar. I've added overflow-x: scroll etc and nowrap but had no joy. Please help :)

Answer 1

You can do this with a div like this:
<div class="scroll">
</div>
Then you need to apply the following styles:
.scroll {
overflow: auto;
white-space: nowrap;
}
Once the width inside the div exceeds either the screen width or the div width (you can define), it will apply the horizontal scroll bar.

Answer 2

Update your CSS like below
You can define the with of resultContainer based on the number of child containers you want to scroll through. So if each test-result is 150px in width and you want to accommodate 100 such containers then make the width of resultContainer to be 150 x 100 i.e 15000px.
<style>
.tab-pane{
width:100%;
overflow: auto;
}
.resultContainer{
width:600px; //4 containers x 150px
}
.test-result {
float: left;
width: 150px !important;
height: 100% !important;
border: solid 1px;
min-height: 100% !important;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
white-space: normal;
}
.new-test-group {
float: left;
width: 150px !important;
height: 100% !important;
border: solid 1px;
min-height: 100% !important;
background-color: lightgreen;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
white-space: normal;
}
.eachNewTest {
border: solid 1px;
cursor: pointer;
}
</style>
UPDATE - Adding with width of .resultContainer dynamically
<script>
$(document).ready(() => {
let resultContainerWidth = 150;
let resultContainerCount = $('.test-result').length;
$('.resultContainer').width(resultContainerWidth * resultContainerCount);
});
</script>