I need the content to scroll horizontally if it exceeds the maximum width. I have tried setting the width to 100%, using overflow-x:auto, and white-space: nowrap as suggested in other stackoverflow threads, but it doesn't work for Bootstrap columns. I also attempted using flexbox with overflow property and adding container-fluid, but the outcome remains the same - the scrollbar is visible but not functional.
Currently, if the number of columns exceeds 18, they break onto a new line instead of scrolling, which is not my desired behavior. I want them to be able to scroll horizontally without breaking onto a new row.
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="container-fluid p-0">
<div style="width:100%; overflow-x:auto; white-space: nowrap;">
<form id="TICKETSALE_ORDERTICKETSELECTSEATFORM" action="TICKETSALE_ORDERTICKETSELECTSEATFORM.php" method="POST">
<div class="row row-eq-height mb-4 px-2 py-2" style="background-color:purple; height:40px;">
<div class="col-sm-12" align="center">
<div class="row">
<div class="col-sm-12" >
<label class="text-center " style="color:white; font-weight:900;">SCREEN</label>
</div>
</div>
</div>
</div>
<?php
for($a=1; $a<=$row_Q1[0]['ROW']; $a++){
//row
?>
<div class="row row-eq-height ">
<?php
for($b=1; $b<=$row_Q1[0]["COL"]; $b++){
//col
?>
<div class="col">
<?php
$RowKeyExist = checkIfKeyExist($row_Q2, $a, $b);
if($RowKeyExist!== false){
?>
<div id=<?=$a.",".$b?>>
<div class="form-check pl-0">
<label class="fas fa-chair SEATIMAGE">
<?php
if($row_Q2[$RowKeyExist]["TICKETCODE"]=='1'){ //"1" is booked
echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630; font-weight: 900; color:grey;'";
}elseif($row_Q2[$RowKeyExist]["TICKETCODE"]=='2'){ //"2" is bought
echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630; font-weight: 900; color:red;'";
}elseif($row_Q2[$RowKeyExist]["TICKETCODE"]=='0'){ //"0" is temp bought in db and not current user
echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630; font-weight: 900; color:grey;'";
}elseif($row_Q2[$RowKeyExist]["TICKETCODE"]==null){ //"null" is vacant
echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630; font-weight: 900; color:green;'";
}
?>
</label>
<div>
<label><?=$row_Q2[$RowKeyExist]["SEATLABEL"];?></label>
</div>
</div>
</div>
<?php
}else{
?>
<div class="d-none">
<label class="fas fa-chair SEATIMAGE" style="font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630; font-weight: 900; color:purple;"></label>
<div>
<label>NONE</label>
</div>
</div>
<?php
}
?>
</div>
<?php
}
?>
</div>
<?php
}
?>
</form>
</div>
</div>
</div>