The number of checkboxes can extend to like 40. If that happends, the scroll bar works and you can scroll to the right. But i want that the image also adjust itself to that length. So right now if i scroll to the right the image automatically stops.
Also when there are only 2 checkboxes, i want the train to be that smal. (So i just want the image to adjust to the length of the checkboxes.
The code is:
<div id="axle_bogie_border">
<!--This is the train image-->
<img src="Images/axle_train.png" alt="train">
<!--The show axles are the number of checkboxes (Filled in by a user)-->
<div id="show_axles">
<?php
$_POST['number_of_axles'];
if(isset($_POST['number_of_axles'])){
for($i=0; $i<$_POST['number_of_axles']; $i++){
echo "Axle " . "$i " . "<input type='checkbox' name='axles[$i]'>";
}
}
?>
</div>
</div>
And the CSS:
#axle_bogie_border {
border: 2px solid black;
width: 98%;
height: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
display: inline-block;
}
#axle_bogie_border img {
width: 100%;
height: 200px;
}
The show axles div has no content yet.
This is a example of how it looks now:
And as you can see the train does not continue after a certain length.
