Possible regression between v4.4.1 and v4.5.0

[jenstroeger]

Hello,

I didn’t want to open an issue quite yet, and I hope this is the right place to start. When I switched from BS v4.4.1 to v4.5.0 I noticed changed behavior in how elements are aligned in rows. This happens in the same browser/different tabs (Chrome 84.0.4147.135 on MacOS 10.14.6).

The result is that two neighboring, labeled <select> elements first sat next to each other and now they sit in different rows. This looks as follows:

Note that the dropdown has the same width, and so do the labeled <select> elements. The dropdown is created inside of a click event handler:

var $dropdown = $(`
  <div class="dropdown-menu image-dropdown-menu vw-30 p-2">
  </div>
`);
$dropdown.append(`
  <label class="w-50 pr-1">Alignment:
    <select name="${imageId}-align" class="custom-select custom-select-sm d-block w-100 image-align-select">
      <option value="left">Left</option>
      <option value="center">Center</option>
      <option value="right">Right</option>
    </select>
  </label>
  <label class="w-50 pl-1">Scale:
    <select name="${imageId}-scale" class="custom-select custom-select-sm d-block w-100 image-scale-select">
      <option value="25">Small</option>
      <option value="50">Medium</option>
      <option value="75">Large</option>
      <option value="100">Full</option>
    </select>
  </label>
`); 

...

$dropdown.click(function(ev) {
  ev.stopPropagation();
}).parent().one("hide.bs.dropdown", function(ev) {
  // Housekeeping.
}).one("hidden.bs.dropdown", function(ev) {
  $dropdown.dropdown("dispose");
  $dropdown.remove();
});
$dropdown.show();

I can sort of “fix” this by changing the width in the browser debugger from 50% to 49%, then both sit next to each other again.

Anything I can do about this regression, to sit the two <select> elements next to each other? Should I be more thorough with using a form group in this case?

[jenstroeger]

No idea what’s going on, but I decided to upgrade to v4.5.2 and then redo the dropdown content using dropdown’s form groups nested inside of form rows:

<div class="form-row">
  <div class="form-group col-6 mb-0">
    <label class="col-form-label-sm py-0">Alignment</label>
    <select name="align" class="custom-select custom-select-sm w-100">
    ...
    </select>
  </div>
  <div class="form-group col-6 mb-0">
    <label class="col-form-label-sm py-0">Scale</label>
    <select name="scale" class="custom-select custom-select-sm w-100">
    ...
    </select>
  </div>
</div>