Issue with IE11 when using Bootstrap 4 and Flexbox

In my design, I have two columns that need to have equal heights when displayed next to each other on a large screen. However, on mobile devices, they should stack on top of each other. I am currently using the old BS grid for this layout.

The content within the columns includes <ul> elements among others. I am facing an issue in IE11 where the lists do not stay within their respective columns. Instead, the list from Column 2 overlaps with the list in Column 1.

  1. How can I ensure that each list renders and stays inside its own column?

  2. Is it possible to achieve responsive columns without using the BS grid and solely relying on flexbox?

For reference, here is the link to the codepen:

https://codepen.io/olefrankjensen/pen/RxXEBN?editors=1000

cssflexboxbootstrap-4

Answer №1

Give this a try:

Remember: remove extra classes such as 

card-block justify-content-center align-items-center
in the section tag.

<div class="row justify-content-sm-center">
  <div class="col-sm-5">
    <section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card h-100" data-template-id="18">

       <!-- Card content -->   

   </section>
  </div>

  <div class="col-sm-5">
    <section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 checked card h-100" data-template-id="18">

      <!-- Card content -->   

   </section>
  </div>
</div>

See the Demo HERE

Updated

 <section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card h-100" data-template-id="18">
        <div class="card-text-content mb-auto">
          <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="Contract Basic"></div>
          <h4 class="contract-title">Contract Basic</h4>
          <ul class="contract-list">
            <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
            <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non.</li>
            <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
            <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non omfattet af serviceaftalen.</li>
          </ul>
        </div>
        <div class="contract-price mt-auto">
          <h2 class="component-margin-top-small">205,00 kr./md.</h2>
        </div>
        <div class="SamCheckbox custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="sam-check-undefined" value="18"><i class="custom-control-indicator"></i></div>
 </section>

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

What is the quickest way to select CSS elements?

Imagine having a popup element labeled as "popup" with two buttons inside, one positioned on the left and the other on the right side, both having the class "popupbutton". Which CSS rule would be the most optimal in this scenario? #popup a.popupbutton ...

cssperformancecss-selectors

The vertical scrollbar appears to be malfunctioning

I'm experiencing an issue where the scrollbar is visible but not functioning as expected. I am utilizing CSS for styling the scrollbar and other layouts, along with HTML to apply the styling. #sub_menu, #content{ display: inline-block; } #sub_ ...

phphtmlcssweb

Customize the Underline Color in MaterialUI Select Component

I'm experimenting with MaterialUI and trying to figure out how to customize the underline and text color of the Select component when an item is selected. Currently, the underline and label appear blue after selection with a gray background. Is there ...

cssreactjsmaterial-ui

Upon page load, a dazzling SVG file will flicker before being adorned with CSS styles

I'm experiencing an issue with an SVG arrow icon on my webpage that flashes quickly across the entire screen upon page load before settling into its proper size and placement. I've tried using CSS to initially hide the icon and then reveal it aft ...

javascriptjqueryhtmlcss

Moving icon that appears when hovering over a menu button

Before diving into this, please take a moment to visit the following website to understand my goal: You'll notice there is a noticeable RED arrow positioned below the menu. What I aim to accomplish is... when I hover over a menu button, the arrow smo ...

javascriptjqueryhtmlcss

Placing a div directly beneath an anchor tag

I'm trying to create a dropdown menu that appears directly under the URL that triggers it. I have successfully made the menu appear, but I am struggling with positioning it correctly. Here is my HTML code: <div id="container"> Content here ...

htmlcss

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

jquerycss

Eliminating Google Adsense from Blog Posts

In each of my posts, I manually insert one Adsense unit. Here is the code: <div id="toppostad" style="float: left"> Adsense code </div> Initially, I assigned an id to the div when placing the code with the intention of using display:none; to ...

htmlcssbloggeradsense

Frequently encountering broken styles in Magento 1.9 due to missing CSS and JS files

Recently, I've been facing frequent style breaking issues on my Magento sites (1.9.2+). This results in the home page displaying only text with missing CSS, JS, and images. To fix this problem, I usually clear the cache by deleting the var/cache fold ...

cssmagentocachingstyles

JavaScript button click changes the selected row's color in a DataTable

I am looking to dynamically change the color of a row in my Datatable when a specific button is clicked. Here is the HTML code snippet for the rows: <tr role="row" class="odd"></tr> <tr role="row" class="even selected"></tr> & ...

javascripthtmlcssdatatable

Exploring the power of directives in AngularJS for dynamically manipulating the

Using angular directives, I am attempting to dynamically replace a portion of HTML within a portlet on a webpage. The portlet contains two embedded sections. The top section includes a heading obtained from a separate backend service. <div class="head ...

csshtmldomangularjsangularjs-directive

Issues with Organizing Bootstrap Card Layout

I'm in need of assistance with creating a responsive Bootstrap card grid. My goal is to have a grid layout with 6 cards, initially displayed as 2 rows of 3 cards. As the screen size decreases, I want the layout to adjust accordingly to maintain reada ...

htmlcssbootstrap-4grid

Arranging the placement of list-group-item buttons

Looking for a way to create a list-group-item with two buttons that are equal in height and aligned to the right? Take a look at this example below: https://i.sstatic.net/II2nl.png While I have the basic structure in place, I'm having trouble gettin ...

htmlcss

One way to position a sidebar between two divs is to ensure it adjusts seamlessly to the size of the browser window when resized

In my layout, I have two grids: one for the header and one for the footer. In between these two grids, I am using a sidebar on the left side. Below is the JavaScript code I am using: function adjustSize() { var heights = window.innerHeight; docum ...

javascripthtmlcss

"Customize your WordPress theme by moving the sidebar from left to right for

Currently, I am utilizing the flat theme sourced from . In an attempt to customize the appearance, I made modifications within style.css: #page:before, .sidebar-offcanvas, #secondary {float: right !important;} However, this adjustment only applies to a ...

htmlcsswordpress-theming

The Jquery Slider feature is no longer functioning properly on Internet Explorer browsers

My Jquery slider previously functioned flawlessly in Chrome and Firefox, and even worked fine in IE at one point. However, as I am nearing completion of the website, it has suddenly stopped working in IE, and I cannot figure out why. If you would like to ...

jquerycssinternet-explorerslider

Maintain the div height as the image loads

Is there a way to prevent the collapse of the .img-container while an image is loading? Currently, when the image takes a few seconds to load, the container collapses and only expands to full height once the image has loaded. I would like the container to ...

cssimagetwitter-bootstraptwitter-bootstrap-3

Arranging an array of objects from the Fetch API into rows and columns in Bootstrap 4 by utilizing a foreach loop to iterate through the array

I am currently retrieving data from an external API, which returns an array of objects. Each object contains details of characters from the Harry Potter movies, and there are a total of 50 objects in the array. I am using a foreach loop to iterate through ...

javascripthtmlarraysbootstrap-4fetch-api

Stop the body from scrolling when the side panel is opened

Whenever I click on my button with the class "cd-btn," it triggers the toggling of my panel with the class "cd-panel.is-visible." jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ ...

jqueryhtmlcsspanel

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler