Is there a way to prevent the select field width from being 100% while keeping the help text at 100% width when using Bootstrap form-groups with label, input field, and help text stacked vertically?
You can view a setup example in this JSFiddle.
I attempted to set the select field width to only 30ch by adding a style to the outer div, but it applied the style to the help text as well. Trying to add the style directly to the select element resulted in formatting issues where the label and input were on the same row instead of separate rows.
<div>
<div class="form-group">
<div>
<label for="debugLevel" id="debugLevellabel">
Debug Log Level
</label>
<select class="custom-select" style="width:30ch" name="debugLevel" id="debugLevel" aria-describedby="debugLevelhelp">
<option value="0">
Severe
</option>
<option selected="selected" value="1">
Warning
</option>
<option value="2">
Info
</option>
<option value="3">
Config
</option>
<option value="4">
Fine
</option>
<option value="5">
Finer
</option>
<option value="6">
Finest
</option>
</select>
</div>
<p id="debugLevelhelp" class="form-text text-muted">
Sets how much logging is written to the debug log, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong
</p>
</div>
<div class="form-group">
<div>
<label for="ioDebugLevel" id="ioDebugLevellabel">
Debug IO Log Level
</label>
<select class="custom-select" style="width:30ch" name="ioDebugLevel" id="ioDebugLevel" aria-describedby="ioDebugLevelhelp">
<option value="0">
Severe
</option>
<option selected="selected" value="1">
Warning
</option>
<option value="2">
Info
</option>
<option value="3">
Config
</option>
<option value="4">
Fine
</option>
<option value="5">
Finer
</option>
<option value="6">
Finest
</option>
</select>
</div>
<p id="ioDebugLevelhelp" class="form-text text-muted">
Sets how much logging is written to the debug log when SongKong reads files or saves changes to files, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong
</p>
</div>
</div>