Skip to content
GitLab

v4: Various flexbox fixes and updates

Merged Mark Otto requested to merge flex-hugs-not-bugs into v4-dev

Starting a catchall branch of sorts to clean some stuff up around the move to flexbox.

Changes so far

  • Fixed inline forms in responsive navbars. The use of my- utilities on the buttons here caused the inputs to grow to match the computed height of the button plus those margins, so things looked broken. I've changed the utilities here and fixed it all up.

  • Updated the three remaining examples to use the new navbar—starter template, jumbotron, and offcanvas are now all up to speed.

  • Speaking of the offcanvas example, that's also been fixed. I pulled in the changes from #19832.

  • Huge flexbox utilities overhaul. Replaced all existing .flex-* utilities that had custom names with new utilities named after their property: value pair (e.g., .flex-items-between is now .justify-content-between). Also added brand new docs to showcase all these new utils.

  • Rewrote modal docs while aiming to fix some double borders in modal examples.

Still to do

Flexbox bugs

  • Inline forms in navbar examples across the board are fubared
  • Forgot to update to flexbox navbar in starter template, jumbotron, and offcanvas examples.
  • Fix offcanvas menu breakage
  • Inline form buttons of mixed sizes are resized to be equal height
  • Inline form checkbox text is too close to the control
  • Custom selects are wrong height
  • Static control example for inline form lacks padding utils
  • Inline help text example is poorly aligned

Flexbox todos

  • Remake form checks/radios with flexbox instead of abs position nevermind i'm an idiot, can't do this because of our markup
  • Remake dismissible alert with flexbox instead of abs position would require extra markup to do, skipping
  • Redo modal positioning with flexbox (hopefully we can vertically center and keep the scroll) nevermind, going to do this later; too many other changes to make alongside this.
  • Remake navs with flexbox instead of floats
  • Remake pagination with flexbox instead of floats
  • Blow out flex utils, document them all
  • Modal with flexbox—see #21425

Docs bugs

  • Modal demos have nested example markup