Issue with the height of content in Mobile Safari when using Bootstrap 4 columns

I have incorporated Bootstrap 4 into my website's design, specifically utilizing the bootstrap grid layout in flex mode.

Within one of the columns, I have placed a button that I desire to fill the entire column width. I have achieved this by setting the button's height to 100% using CSS.

While this method works seamlessly on most browsers, Safari seems to ignore this setting.

Below is the HTML structure I've implemented:

<div class="container">
    <div class="row">
        <div class="col-10">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. [...] varius.
        </div>
        <div class="col-1">
            <button class="btn btn-primary" type="button">Lorem ipsum</button>
        </div>
    </div>
</div>

In addition to the standard bootstrap code, I have included the following CSS snippet:

button { height: 100%; }

For a demonstration of the issue, you can refer to this CodePen example http://codepen.io/anon/pen/BppMvw

Any suggestions on how to address this problem are welcome. Due to the variable heights of other columns in the row, setting a fixed height is not feasible, and using JavaScript is not an option.

Answer №1

One possible resolution is to apply the flex:1 property to the button and turn its parent into a flex container. To view an example, check out this link.

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

Updating Sencha list itemTpl on the fly

Is there a way to dynamically change the itemTpl in a Sencha list to adjust the visibility of a column based on certain conditions? Your assistance would be greatly appreciated. ...

BootStrap Modal: Experience issues with multiple modals opening simultaneously, causing the page to freeze after the last modal is closed

I'm having trouble understanding this, but I have 2 modals <!-- Upload Document Modal 1 --> <div class="modal fade" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModalLabel" aria-hidden="true"> <div cl ...

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

How can I display the selected value from a dropdown in a text box at the current cursor position? I am currently using the following code: enter code selectChangeHandler(event: any) { this.selectedID = event.target.value; // console.log("this.selecte ...

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

I've been searching high and low on the internet for a simple, sleek method to customize the appearance of the Browse button on an HTML <input type=file> element. However, all the solutions I've come across involve hiding controls, placing ...

Bootstrap Dropdown Menu

When my website is displayed on a large screen, the dropdown menu appears like this: Dropdown Menu I would like the dropdown to open below my Link menu: However, on a smaller screen, the dropdown looks like this: Dropdown Menu2. How can I resolve this i ...

Attempting to align two div blocks side by side to occupy the entire page

http://jsfiddle.net/UeLMA/1/ Here's the HTML code snippet: <div id="left" style="background: red; display: inline-block; float: left"> aaaa<br /> aaaaa </div> <div id="right" style="background: yellow; float: left">&l ...

What is the process for having HTML open a hyperlink in a new window?

I am facing the following issue: <p class="bigfont"> <img width="4%" src="images/Youtube.png" class="float-left"/ > <a href="\\OC2-RMGFS\Public\Safety\runhidefight-eng.wmv" target="_blank" title="Response to ...

Modifying the appearance of InputText through CSS encapsulation

I'm a newbie to using Blazor and I'm currently experimenting with changing the style of InputText by utilizing css isolation. Interestingly, I've managed to successfully change the style when setting it inline or internally, however, things ...

Lightbox Thumbnail feature in Wordpress theme

Looking for some help with customizing code in my WordPress theme. The current setup includes a thumbnail image with two icons on top - one is a lightbox gallery icon that I want to focus on, and the other is a like button. My goal is to remove the lightb ...

Update the color of navigation items to reflect their active status

Here is the snippet of HTML code: <header> <nav> <a href="#" id="menu-icon"></a> <ul> <li><a href="#"">Home</a></li> <li><a href="#">About</a></li> & ...

Design a custom cover page before printing using the window.print() method

When it comes to printing, I have a header and footer displayed on each page. However, I want the first page to be clean with just a picture or title, without the header and footer that appear on subsequent pages. I've attempted to use CSS like this ...

Setting the height and width of a table and utilizing rowspans may not produce the desired outcome

I've encountered an issue with my table that I can't seem to resolve. The CSS should dictate the width and height, but something seems off. Am I approaching this incorrectly or is there something missing? Also, why are the borders not aligning p ...

Tips for creating an animated effect on the active tab when it switches

Currently, I have a tab list containing li items. When an item is active, the li item has rounded corners and a box shadow effect. My goal is to add an animation that shows the active pill moving to its next position when it changes, but I am unsure of how ...

Turbolinks not allowing the addition of JavaScript classes for background images

While trying to merge a front end html theme with my Laravel app, I encountered an issue with turbolinks that is preventing Javascript from appending div classes. This is resulting in background images only being displayed on page refresh. <div class= ...

Animate your images with a captivating wave effect using SVG animation

I've been working on animations and I have an SVG image that I want to move like a wave continuously. I've tried using GSAP and CSS but still haven't been successful. Can anyone offer any suggestions or help? It would be greatly appreciated. ...

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

Arranging progress bars between various nodes using HTML and CSS

I am currently facing a challenge in creating a stepping wizard form layout that features a bar at the top of the page. This bar displays a dynamic number of steps (nodes) and progress bars that connect these nodes. However, I am encountering difficulties ...

Adjusting the iframe for a side navigation with multiple dropdown options

I have a file called index.html that contains two dropdown containers and an iframe. The first dropdown container works with the iframe, but the second one does not. Can anyone help me fix this issue? I am having trouble understanding the script for chang ...

Styling Radio Buttons and Links in Horizontal Layout Using Bootstrap

Encountering an issue in Bootstrap while attempting to incorporate custom radio buttons and a hyperlink in the same row. It seems that either the hyperlink functions OR the data-toggle feature for radio buttons works, but not both simultaneously, especiall ...