Force input group to fully be visible and not wrap in a table cell

Question

I have an input group with an input and button placed in a table cell, however, the button wraps below a certain size.I want to prevent this behaviour, specifically for this table cell and the rest of the column. The relavant generated html (javascript added element):

<div id="inspireRecords" class="table-responsive">
<table class="table table-sm" id="inspireTable"><thead><tr>
        <th>Title
        <i onclick="sort_table(&quot;#inspireTable&quot;,0)" class="fas fa-sort" aria-hidden="true"></i>
        </th>
        .
        .
        .
        <th>Projects</th></tr></thead><tbody><tr>
    <td data-sort="n-flation" class="title">N-flation</td>
    .
    .
    .
    <td>
        <div class="input-group p-0">
            <select class="form-select projectSelect"      
                <option value="0" selected="">Choose...</option>
                <option value="1">Test</option>
                <option value="2">Test 2</option>
                <option value="3">Test 3</option>
            </select>
            <button class="btn btn-primary projectSelectBtn" type="button">Add</button>
        </div>
    </td></tr></tbody>
</table></div>

Custom CSS (which will apply):

th {
    white-space: nowrap;
}

div {
    padding: 0.5rem 0;
}

What it currently looks like:

What I always want it to be like even if it requires scrolling:

I would welcome other ideas too if it seems like bad design as I am a beginner.

Answer 1

First of all, you have an unclosed tag here:

<select class="form-select projectSelect" <option value="0" selected="">Choose...

This can cause you problems. What code editor are you using? I suggest to use a formatter plug-in such as Prettier to help you format your code properly.

Going back to your issue, I just tested your code and is working fine with Bootstrap 5, so make sure you're linking the library version that corresponds to the classes you're using.

If the problem persists, add the following flex class to the div containing your elements to keep the children (select input and button) in a row direction without wrapping.

.flex-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

Please find the full example below. The table is 200px wide only to demonstrate that the elements won't wrap. Tested and works.

table {
  max-width: 200px;
}

th {
  white-space: nowrap;
}

div {
  padding: 0.5rem 0;
}

.flex-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="inspireRecords" class="table-responsive">
  <table class="table table-sm" id="inspireTable">
    <thead>
      <tr>
        <th>Title
          <i onclick="sort_table(&quot;#inspireTable&quot;,0)" class="fas fa-sort" aria-hidden="true"></i>
        </th>
        . . .
        <th>Projects</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-sort="n-flation" class="title">N-flation</td>
        . . .
        <td>
          <div class="input-group p-0 flex-row">
            <select class="form-select projectSelect">
              <option value="0" selected="">Choose...</option>
              <option value="1">Test</option>
              <option value="2">Test 2</option>
              <option value="3">Test 3</option>
            </select>
            <button class="btn btn-primary projectSelectBtn" type="button">Add</button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>