PSA: vertical alignment

[bazineta]

Just a public service announcement for those upgrading from the 1.12 release, and find that vertical alignment is different, at least on Bootstrap 3 (still in the process of migration to v4 here).

In 1.12, the select button was always classed as a btn-group, so you'd get vertical-align: middle for free. As such, if you had for example a layout with a select next to some buttons or button groups, they'd all line up properly vertically.

In 1.13, the select is no longer classed as a btn-group, so if you want it to align in situations like that, you'll need to add vertical-align: middle.

[caseyjhol]

Can you link me to a demo of this problem?

[bazineta]

@caseyjhol It's difficult to do so without the CDN working; the .1 release is present, but the .2 as linked in the README is presently returning a 404.

[caseyjhol]

Working with the CDNJS team to get the 1.13.2 version up. The playground (https://developer.snapappointments.com/bootstrap-select/playground) uses the latest "unstable" version of bootstrap-select.

[bazineta]

As you no doubt suspected, there's more to the story.

Here's a 1.13.1-based minimal fiddle.

https://jsfiddle.net/wn50x4ag/

For posterity in case the fiddle vanishes, this is using Bootstrap 3.3.7 and the 1.13.1 code.

.mbr4 {
  margin-bottom: 4px;
  margin-right: 4px;
}
.vm {
  vertical-align: middle;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-default mbr4">Button</button>
      <select class="selectpicker mbr4" data-container="body" title="Select"></select>
    </div>
  </div> 
</div>

The margins here are a part of how we've traditionally dealt with a particular responsive layout problem; debatable if it's the right thing at this point, but let's run with it for now, having come this far already.

In BS3, all btn-group classes inherently are vertical-align: middle. As such, even with the 4px margins specified on the elements, the button and the select line up. With 1.12, since the select was also a btn-group, the alignment worked out. With 1.13, since it's now not one, that's no longer true, and can be emulated in this test case by adding the vm class to it.

[caseyjhol]

Thanks! Even though it's a bit of a fringe case, I still consider it a breaking change, which shouldn't have happened. I'll add vertical-align: middle back to the parent div.

[caseyjhol]

Released in v1.13.4!