1

I have a site built on Bootstrap 3. I've created a custom row class to add flexbox to the layout but it doesn't seem to work correctly in Safari.

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
  .row-eq-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row row-eq-height">
    <div class="col-xs-6">
      This should be on the left
    </div>
    <div class="col-xs-6">
      This should be on the right
    </div>
  </div>
</div>

Any ideas what's going on here?

user13286
  • 3,027
  • 9
  • 45
  • 100
  • 1
    Looks like it could be the pseudo elements that bootstrap is adding as a clearfix. Changing them to display block seems to fix the issue, not sure why though. – jleggio Sep 20 '19 at 19:01
  • Hmmm nice catch, do you think it would cause any issues if I were to change those pseudo elements to `display:block` when they exist within my `row-eq-height` class? – user13286 Sep 20 '19 at 19:20
  • 1
    Im pretty sure you'll be good. This example says that display:block is actually preferred... https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use/1633170#1633170 – jleggio Sep 20 '19 at 19:55
  • 1
    Actually now that I read it again, it says that with flexbox you don't need the clearfix. So I bet you can remove it all together. – jleggio Sep 20 '19 at 19:58
  • @jleggio awesome, thank you so much for looking into that for me. Please add it as an answer so I can accept it – user13286 Sep 20 '19 at 20:43
  • First off, mixing Bootstrap 3 and Flexbox is a bad idea. Ver. 3 is based on `float` and doesn't work well with flex. Second, no meaning to prefix `display: *-flex` when you don't use prefixed versions for `flex-wrap: wrap;`. I strongly recommend you move to Bootstrap 4 – Asons Sep 21 '19 at 19:05
  • @LGSon I appreciate the suggestion, but this project is way too big to move to Bootstrap 4. The `flex` adaptation is working perfectly fine. The code above overrides the floats. – user13286 Sep 23 '19 at 16:00
  • No, that code does not override float, it adds `flex`. To remove float you need to do `float: none`. And do note, no point to use prefixed `display: *-flex` when you don't prefix the other flex properties. – Asons Sep 23 '19 at 16:03
  • @LGSon what i mean is that when the rows are set to `display:flex;` the floats are ignored. This is a widely used flex adaption for Bootstrap 3. – user13286 Sep 23 '19 at 16:05

0 Answers0