Internet Explorer 11 is experiencing difficulties containing elements within the card-footer

I have designed a form that is enclosed in a Bootstrap 4 Card like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row card">
        <div class="col-12 card-body">
            Sample text in the card body
        </div>

        <div class="col-12 card-footer">
            <div class="row">
                <div class="alert alert-warning col-12">Sample alert box</div>
            </div>

            <div class="row form-group">
                <div class="col-6">
                    <button type="button" class="btn btn-block btn-primary">Save form</button>
                </div>
            </div>
        </div>
    </div>
</div>

The normal content should be placed in the div.card-body, while I positioned an alert box and my "Save form" button in the div.card-footer.

This setup functions correctly in Chrome version 63 and Firefox version 58. However, when viewed in Internet Explorer 11, the save button and alert exceed the boundaries of the div (screenshot). How can I rectify this issue?

htmlcssinternet-explorerflexboxbootstrap-4

Answer №1

To fix the problem, simply remove the col-12 class that was used along with the card-footer:

<div class="col-12 card-footer">

Change it to:

<div class="card-footer">

The Bootstrap col-12 class applies the following CSS styles:

-ms-flex: 0 0 100%; 
flex: 0 0 100%;

If you toggle these styles or replace the third argument (flex-basis) of 100% with auto or a fixed value, it should resolve the issue. However, be cautious of any potential side effects.

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

Launching event handlers and applying CSS classes within a single scenario

How can I toggle the visibility of a button based on form field validation in JavaScript? I want to show or hide the button when the .confirm button is clicked, and if the form is valid, add a checkmark to the body element through event listener. The issu ...

javascriptcsseventsconditional-statements

Python - convert HTML to GIF image

Is there a way to convert HTML content to a GIF image? I was able to render it to PDF using reportlab, but I haven't had any success with converting it to GIF. I'm looking for something similar to xhtml2pdf.com, but I need the final output to b ...

pythonhtmlgif

Responsive Text Carousel in Bootstrap 4

My attempt to create a carousel with text inside is not turning out as expected. When I resize the screen or view the website on a smartphone, the text becomes misaligned. Can anyone advise on how to resolve this issue? I've searched numerous websites ...

htmlcsstwitter-bootstrapbootstrap-4

font-family: code, code

Within the normalize.css file, there are rules for monospace fonts that include: font-family: monospace, monospace; How does this differ from just using: font-family: monospace; Could there be a specific reason for this? Perhaps it serves as a workaround ...

cssmonospacenormalize-css

What is the best approach for choosing unquoted HTML attribute values?

I have a unique situation where I am dynamically appending a select element to a form from a hidden field, with escaped spaces in the element content. This is the hidden field content: <input type="hidden" id="field1" name="field1" value="<select i ...

javascriptjqueryhtml

Incorporate an external JavaScript script using code

I'm currently working on integrating a map widget from 'Awesome Table' into the codebase of an open-source CRM platform. The specific code snippet I need to add is <div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"> ...

javascriptjqueryhtmlsrc

Apply a tint to the specified section

I'm looking to add a semi-transparent color overlay to my HTML section, but I'm facing an issue where it doesn't cover the entire section. Here's what I have so far: #main { padding-top: 50px; padding-bottom: 50px; backgr ...

htmlcss

Dynamic Fill Colors in SVG File Through Vue Components

I am currently developing a unique social media platform using VueJS 3. For the design aspect, I incorporated Twitter's iconic logo saved as an .svg file, easily displayed using the <img /> tag. To modify its color, I utilized the fill="#f ...

cssvue.jssvgvue-componentvuejs3

Stopping data-ajax attributes from running

Here is a link I have along with its corresponding fiddle: <a class="update noClick" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#vote11" href="/Tutors/RateNegative/11" onclick="return window.confirm('Are you sure?');">qwer ...

javascripthtmlajaxasp.net-mvc

Why do all the values in my table turn into input boxes when I click the edit button?

When working with my HTML, I am using ngFor to iterate through a list of items and display them in a table. However, when I try to edit an item by clicking on it, the input box opens but all the table rows display the same value. <tr *ngFor="let item o ...

htmlangulartypescript

Insert HTML elements using javascript

Is it possible to change this JavaScript code in the following way: divElement.appendChild(document.createTextNode("<h7>Optie " + inputNumber + ": </h7>")); What would be the best approach to achieve this? ...

javascripthtml

Substitute link with asynchronous JavaScript and XML

I need to enable/disable user accounts by clicking on an anchor. The list of users is created dynamically using a loop. Here's an example of an anchor tag: <a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactiv ...

javascriptjqueryhtmlajaxanchor

The cancel button for the input type "search" does not appear on Firefox, Internet Explorer, and Edge browsers

.hs-search-field__input { color: #111d33; border-bottom: 3px solid #111d33; appearance: searchfield; -moz-appearance: searchfield; -webkit-appearance: searchfield; -ms-appearance: searchfield; color: #fff; border-radius: 0px ...

htmlcssformscss-selectors

CSS alternative for using percentage-based alignment instead of text-align

Wondering if there is a CSS3 property that allows for the positioning of elements like <p> or any <h$> with percentages instead of pixels, similar to the way text-align works. For example, consider this HTML code: <p id="first">Here&ap ...

htmlcsstext-align

Creating a triangular shape using a div element

Struggling to create a triangular div? I used the border trick to make it, but now there's a transparent line slicing through the triangle like a dividing line. I've attempted various solutions to make that line solid, but nothing seems to be wor ...

htmlcsstwitter-bootstrap-3

Is it possible to submit a form without redirection or iframes? (Seems to be ineffective on mobile devices)

I have successfully implemented a submit function on my desktop using an iframe, which works without any redirects. However, when I visit my site on a mobile device (using Chrome or Safari), the page automatically redirects to the endpoint and stops load ...

javascripthtmlvue.js

What could be preventing my state from changing to false when I click the close button on the menu?

Despite initializing my state to false, the problem arises when I open and close my menu. The state never actually becomes false, causing the closing animation of the NavBar to not run as expected. The component: import CloseButton from "./CloseButto ...

csstypescriptnext.jstailwind-csscss-animations

Javascript - modify table based on user input

Despite my efforts to find a solution, I couldn't find anything relevant to my current situation. As part of my internship, I am tasked with developing a platform using Javascript. I have a specific set of values and require the user to input a valu ...

javascriptjqueryhtml

An individual picture surrounded by a multitude of rows within a table

Seeking assistance in developing a responsive layout using Bootstrap that consists of multiple rows but only features a single image (refer to the attached link). I have encountered challenges and would appreciate any guidance or support. ...

html

switching the CSS class of a different child element from its parent

Having just started working with jQuery, I'm struggling to figure out how to target specific elements when clicking on toggle buttons. My goal is to toggle the class of each respective text container (from collapsed to expanded) when its correspondin ...

jqueryhtmlcss