css: varying container heights for columns in Chrome and Safari using Bootstrap 4

In my code snippet below (this is just a prototype, in the actual application everything is different but follows a similar structure):

  <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>

Check out the sample here to see it live.

I am currently using Bootstrap 4 for this project.

The issue arises in Safari (v10.1) where the layout does not display correctly: https://i.sstatic.net/7HSbF.jpg

Can anyone assist with identifying what might be wrong? Is there a way to adjust the styling without having to redo the entire DOM structure? The aim is to ensure that the height matches the display in Chrome.

htmlcssflexboxbootstrap-4

Answer №1

If you try to use this code on Safari, it will not function correctly.

The issue is straightforward - setting the h-100 (height: 100% !important) on the inner div will result in a computed value of auto because there is no parent height specified.

Other browsers calculate the height based on the col-3 flex item element and its parent's align-items: stretch, which explains why it works on those browsers.

This example demonstrates that setting align-items to 

flex-start</code also fails in other browsers: <a href="https://plnkr.co/edit/LqSqK4j4GhpDbkc4E0i5?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/LqSqK4j4GhpDbkc4E0i5?p=preview</a></p>

<hr>

<p>A more effective solution is to utilize Bootstrap 4 and the Flexbox model properly. For flex row items like these, the default value of <code>align-items
is stretch, achieving the same effect as height: 100%.

By simply changing h-100 to w-100 and d-sm-block to 

d-sm-flex</code, the code will perform as expected.</p>

<p><a href="https://plnkr.co/edit/Qqrof95vlEft51vGELsm?p=preview" rel="nofollow noreferrer">Updated plnkr</a></p>

<p>Stack snippet</p>

<p><div>
<div>
<pre><code><link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1f051b051e">[email protected]</a>" 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>

Answer №2

Resolved the identical problems by implementing the following:

<!DOCTYPE html>

Answer №3

No mistakes were made on your part, Bootstrap simply incorporates vendor prefixes for its columns that Safari does not cover.

The default properties in Bootstrap for columns include:

-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;

Since I don't have Safari, I can't confirm this, but you might just need to add:

.col-3 {
  display: -webkit-flex;
}

Safari versions 10.1.1 and onwards now support flexbox, so adding this will prompt Safari to render the column within a flexbox layout, ultimately resolving the height issue.

I hope this explanation proves beneficial!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

choose the initial element within a class

Seeking a way to target the first element within each group of the same class? Consider the following scenario: <div class="group"> <div class="element"></div> <div class="element"></div> <div class="element"&g ...

htmlcssless

Ways to incorporate vertical alignment while adjusting the size of a <div> block

Seeking advice on how to vertically align <div> blocks (green blocks in my example) when changing block size. What adjustments are needed in my example for the vertical alignment (middle) of side blocks to be maintained when resizing the browser win ...

htmlcssalignmentvertical-alignment

I'm attempting to make it so that when users click on this link, it opens in a new tab instead of directing them away from my website. Unfortunately, using _blank

The link I have is currently opening in the same tab, but I want it to open in a new tab to keep users on my site. I've added target="_blank" to the code, but it's not working as expected. <BottomNavigation className={classes.root}> &l ...

htmlreactjsmaterial-uinonblank

An error occurred: [object Object] does not support the 'popup' method

I've been attempting to close the jQuery popup by using $('#partsPopup').popup("close"); However, I encountered an error stating that there is no method called "popup". Below is the sequence of scripts that I have followed. Any assistance wo ...

jquerycssjquery-mobile-popup

HTML various button designs - such as a cogwheel

I need a button on my Angular/Electron project that resembles a gear icon. I came across these resources: here and here. However, when I tried to implement them, they didn't work as expected. Currently, the button looks like this: <button class= ...

htmlangularelectron

Error found in the HTML tag data when viewing the page source for an issue

I am displaying some data from my express to ejs in HTML tag format. It appears correctly on the ejs template page and the web page. However, when I check the page source, the HTML tags are encoded and displayed as unescaped characters. Is there a solution ...

javascripthtmlnode.jsexpressejs

replace the standard arrow key scrolling with a new custom event

Currently, I am in the process of creating a unique scroll box to address my specific needs. The standard html <select> box is not cutting it for me as I require two columns displayed, which I couldn't achieve with a regular <select>. Howe ...

javascriptjqueryhtmlhtml-select

How to vertically align an image within a div that has a variable height

Is there a way to center an image vertically within a div that is 1/5 of the screen's height? I have managed to horizontally center the image, but vertical alignment seems tricky. Here's the code I've tried so far: http://jsfiddle.net/ws911 ...

htmlcssvertical-alignmentviewport-units

Please fill out and submit a form by clicking on a button in HTML

I am currently developing a software program that needs to automatically submit a form on a webpage by "clicking" on a button: <button class="form" type="submit">Send</button> Based on my limited knowledge, I understand that in order to submi ...

htmlformssubmit

checkbox inspired by the design of the iPhone

I'm looking to create a custom checkbox! <label id="sliderLabel"> <input type="checkbox" /> <span id="slider"> <span id="sliderOn">SELECTED</span> <span id="sliderOff">SELECT</span> ...

jquerycsscss-transitions

Can content projection be utilized from a child component in Angular?

Keep in mind, this example could be achieved without using content projection. I am just showing a simplified version here. Imagine having a component that displays lists of names in two separate elements: import { Component } from '@angular/core&ap ...

htmlangulartypescript

I am having trouble locating the lightbox and bootstrap js file in Django. Any suggestions on how to resolve this issue would

[11/Nov/2020 20:13:11] "GET /about HTTP/1.1" 200 3615 [11/Nov/2020 20:13:12] "GET /static/js/lighbox.min.js HTTP/1.1" 404 1677 [11/Nov/2020 20:13:12] "GET /static/js/bootstrap.bundle.min.js.map HTTP/1.1" 404 1716 A snippet fr ...

javascriptpythondjangobootstrap-4

Tips on incorporating a button to enable text formatting to 'bold' within a Text Area on an HTML webpage:

In the process of creating an online text editor, I am looking to incorporate a button above the text area that can be used to make selected text and/or upcoming text bold. To provide more clarity, I envision adding a bold button similar to the one found a ...

htmlcss

How can I prevent my mouse click from being overridden by my mouse hover?

Currently, I am developing a Sudoku game using JavaScript and facing some challenges with mouse events. My goal is to enable users to hover over a square and have it change color, as well as click on a square to highlight the entire row, column, and quadra ...

javascripthtml

Can you explain the distinction between onKeyUp and onKeyUpCapture in React (as well as onKeyDown/Capture)?

I was unable to find any existing documentation or questions related to my query, which surprised me. Upon inspecting the React index.d.ts file, I came across the following: // Keyboard Events onKeyDown?: KeyboardEventHandler<T>; onKeyDownCapture?: ...

htmlreactjsdom-events

Mobile FPS suffering due to slide-out drawer performance issues

My application features a drawer menu that functions smoothly on desktop, but experiences issues on mobile devices with noticeable lag. Within the header, I have implemented a boolean value that toggles between true and false upon clicking the hamburger i ...

cssangularjsperformance

Trouble with disabling default actions and transferring text

When the user clicks on loginAccount, the intention is to extract the text from the element with the id input-1 and assign it to username. This same process should occur for password, followed by form submission. However, despite using e.preventDefault() ...

javascriptjqueryhtmlajaxforms

Is there a way to align six columns on the left side and have a dynamic column on the right that fills the width of the browser window?

Is there a way to make a fluid container in Bootstrap 5 that contains a normal container on the left with 6 columns of content, while allowing the right side of the container to expand to the end of the browser window? When using a normal fluid container, ...

htmlcsstwitter-bootstrapcontainersbootstrap-5

Only the main page is accessible quickly through Express

Currently, I am delving into learning Express and leveraging FS to load my HTML Page. My research on this topic only led me to references of using ASP.NET instead of Express. Here is a snippet from my Server.js file: var express = require('express&a ...

htmlnode.jsexpressfs

When using BeautifulSoup, there may be instances where the table element is not always detected, resulting in a 'NoneType' error being returned on occasion

Hello everyone, I am trying to retrieve accurate daily temperatures from www.wunderground.com and encountering the 'NoneType' error occasionally. For instance, the code below attempts to fetch the temperature data from March 1 to March 5, 2020. S ...

pythonhtmlseleniumbeautifulsoupnonetype