Question posted in 
I have an HTML layout I am creating for a music player using Bootstrap 5. There is a section of the player where I would like to display information about the current pattern being played in a song.
Here is what I want to display. There are essentially two columns. On the left is an order list column, where I want all pattern numbers in the order list to be displayed vertically. This one is very narrow.
On the right is the pattern data section, which shows the data of the pattern currently being played. This can sometimes be very wide.
What I want is for the two to be displayed side by side. However, when there is a lot of data for a pattern, or if the viewport is small, the second div appears below the first. I want the two divs to always appear next to each other, with the first div only taking the width that it needs, and the second div taking the rest.
Here is a snippet so you can see what I mean. If you narrow your browser window, you’ll see that the pattern-data column drops below the order-list column, but I want them to remain next to each other.
td.fixed-col {
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
td.row-num-col {
width: 3em;
}
td.tracker-col {
width: 4em;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<body>
<div class="container my-2 mx-1 py-2 bg-light rounded" id="info">
<!-- An unrelated container that shows the playback controls -->
</div>
<div class="container my-2 mx-1 py-2 bg-light rounded">
<div class="row">
<!-- This should be on the left and should be narrow -->
<div class="col-auto" id="order-list">
<div id="order_list" class="column text-warning bg-dark rounded p-3 font-monospace text-center">
<div id="order-0">0</div>
<div id="order-1">1</div>
<div id="order-2">2</div>
<div id="order-3">3</div>
<div id="order-4">4</div>
</div>
</div>
<!-- This should be on the right and take up the remaining horizontal space -->
<div class="col" id="pattern-data">
<div id="other-panel" class="column text-warning bg-dark rounded p-3 font-monospace overflow-x-auto" style="overflow-x: auto; white-space: nowrap;">
<table id="patternView">
<tr id="pattern_1_header">
<td class="row-num-col fixed-col">Row</td>
<td class="tracker-col fixed-col">Ch 0</td>
<td class="tracker-col fixed-col">Ch 1</td>
<td class="tracker-col fixed-col">Ch 2</td>
<td class="tracker-col fixed-col">Ch 3</td>
</tr>
<tr id="pattern_1_row_0" class="">
<td class="row-num-col fixed-col">0</td>
<td class="tracker-col fixed-col">F-5</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">F-5</td>
<td class="tracker-col fixed-col">---</td>
</tr>
<tr id="pattern_1_row_1" class="">
<td class="row-num-col fixed-col">1</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">---</td>
</tr>
<tr id="pattern_1_row_2" class="">
<td class="row-num-col fixed-col">2</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">F-5</td>
</tr>
<tr id="pattern_1_row_3" class="">
<td class="row-num-col fixed-col">3</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">---</td>
<td class="tracker-col fixed-col">---</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>What do I need to change so that #pattern-data is always to the right of #order-list, even in a small viewport (or if the table has a lot of columns)?
2
Answers
You will want to simply add
flex-nowrapclass in this line:When you use the .flex-nowrap class with the .row class, it stops columns from stacking vertically. Instead, all columns stay in a single row horizontally, even if the screen isn’t wide enough to fit them all. Here’s modified code: