Issue
I have such code (it's a prototype, in real app everything is different, but the same schema):
<body>
<div class="row">
<div class="col-3 d-none d-sm-block">
<div class="h-100" style="background:red">
123123
</div>
</div>
<div class="col-3 d-none d-sm-block">
asdasdasd <br> asdasdasd <br> asdasdasd
</div>
</div>
</body>
https://plnkr.co/edit/TyrOGOCNBHePtbxH6xYN?p=preview
I'm using bootstrap 4.
But in Chrome everything is fine:
not in Safari (v10.1): 
what i do wrong? is it possible to change this style, without rebuilding my DOM? so height should be the same as in Chrome
Solution
With the given code, this won't work on Safari.
The reason is quite simple, as when you set h-100 (height: 100% !important) on the inner div, that percent value will be based on the parent's set height, which in this case has none, hence the computed value will be auto.
The other browsers appear to use the computed height of the col-3 flex item element and its parent's align-items: stretch, hence there it work.
This sample proves that, as if you set align-items to flex-start, it will fail in the other browsers too: https://plnkr.co/edit/LqSqK4j4GhpDbkc4E0i5?p=preview
A better approach is to make use of Bootstrap 4 and the Flexbox model properly, which in this case, for flex row items, has its align-items. Its default value is stretch and does exactly the same thing as height: 100%.
And since there isn't anything you can do with a block element that you can't with a flex element, simply change h-100 to w-100 and d-sm-block to d-sm-flex and it will work.
Stack snippet
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<h1>Hello Plunker!</h1>
<div class="row">
<div class="col-3 d-none d-sm-flex">
<div class="w-100" style="background:red">
123123
</div>
</div>
<div class="col-3 d-none d-sm-flex">
asdasdasd <br> asdasdasd <br> asdasdasd
</div>
</div>A better approach than using w-100 (width: 100%) would be to use flex: 1. Since Bootstrap's col rule does that, but also has padding, you could create one of your own, here called flex-1.
.flex-1 {
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
https://plnkr.co/edit/ODeYcUgEDdZjysnCQSYB?p=preview
Or use col combinded with a new rule that removes the padding, here called nopadding
.nopadding {
padding: 0;
}
https://plnkr.co/edit/jj07PrEVXDMW2eRLw4Ti?p=preview
Answered By - Asons
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.