Troubleshooting a Problem with CSS Div Multi-column Formatting

I have designed a multi-column div that displays correctly in Firefox but has formatting issues in Chrome and IE. In Firefox, the three columns appear properly with the frame of the last item in column one ending correctly. However, in Chrome and IE, the frame of the last item in column one is split between column one and column two.

Is there a way to ensure consistent formatting across all browsers? I need a solution that can accommodate varying numbers of items.

Below is the code snippet (also available on JSFiddle):

#assignAreaTypes { 
  background-color:#FFF;
  border-radius:15px;
  color:#000; 
  padding:20px;
  min-width:400px;
  min-height: 150px;
}
.tierGrp {
  align:center;
  text-align:center;
  font-size:26px;
  background-color:#EEE;
  width:625px;
  min-height:145px;
  height:auto;
  display:block;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  padding-top: 3px
    padding-bottom: 3px
}
.areaGrp {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  text-align:left;
}
.areaType {
  margin-bottom:3px;
  font-size:13px;
  padding-bottom: 2px;
}
.eMail {
  font-size: 12px;
  font-family:Georgia, "Times New Roman", Times, serif;
  border:1px solid #3498DB;
  border-radius:5px;
  background:#EDF5FA 50% 50% repeat-x;
  height:auto;
  min-width:100px;
  padding-left:5px;
  padding-right:5px;
}
<div id="assignAreaTypes">
  <form id="userAreaTypes" action="/Admin/updateUsers.php" method="post">
    <a class="b-close ui-state-default ui-corner-all ui-icon ui-iconclosethick"></a>
    <div class="buttonHolder">
      <div align="center"><font size="+3">Test User</font></div>
      <div align="left"><font size="+1">Assigned Tests:</font></div>
      <div class="tierGrp areaGrp">
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="13">Test 01</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="1">Test 02</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="18">Test 03</div></label>
        // Remaining checkboxes go here
      </div>
    </div> 
  </form>
</div>

htmlcssgoogle-chromeinternet-explorer

Answer №1

Perhaps the column-fill property only functions properly in Firefox and not in Chrome or IE. This could be due to the fact that Firefox is currently the only browser that fully supports this property, as indicated on the MDN website. On the other hand, caniuse.com and W3Schools suggest that while Firefox does provide some level of support for column-fill, Chrome and IE have limited or no support for it.

If you encounter compatibility issues, you might consider using a workaround that involves adjusting the display for Chrome and IE:

  • Set the div elements inside the label tags to have a display:inline-block style.
  • Specify that the width of these div elements should be 100% of the available space.

While this workaround may resolve the issue, you may encounter some vertical spacing challenges that can be addressed by applying additional styles to the label tags. Here is a snippet of the code that implements this workaround:

#assignAreaTypes { 
  background-color:#FFF;
  border-radius:15px;
  color:#000; 
  padding:20px;
  min-width:400px;
  min-height: 150px;
}
.tierGrp {
  text-align:center;
  text-align:center;
  font-size:26px;
  background-color:#EEE;
  width:625px;
  min-height:145px;
  height:auto;
  display:block;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.areaGrp {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  text-align:left;
}
.areaType {
  margin-bottom:3px;
  font-size:13px;
  padding-bottom: 2px;
}
.eMail {
  font-size: 12px;
  font-family:Georgia, "Times New Roman", Times, serif;
  border:1px solid #3498DB;
  border-radius:5px;
  background:#EDF5FA 50% 50% repeat-x;
  height:auto;
  min-width:100px;
  padding-left:5px;
  padding-right:5px;
}
.tierGrp label > div {
  display:inline-block;
  width:100%;
  box-sizing:border-box;
}
<div id="assignAreaTypes">
  <form id="userAreaTypes" action="/Admin/updateUsers.php" method="post">
    <a class="b-close ui-state-default ui-corner-all ui-icon ui-iconclosethick"></a>
    <div class="buttonHolder">
      <div align="center"><font size="+3">Test User</font></div>
      <div align="left"><font size="+1">Assigned Tests:</font></div>
      <div class="tierGrp areaGrp">
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="13">Test 01</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="1">Test 02</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="18">Test 03</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="6">Test 04</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="16">Test 05</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="3">Test 06</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="10">Test 07</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="8">Test 08</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="14">Test 09</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="4">Test 10</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="9">Test 11</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="7">Test 12</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="5">Test 13</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="2">Test 14</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="21">Test 15</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="11">Test 16</div></label>
      </div>
    </div> 
  </form>
</div>

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

The button's unclickability is due to the zIndex being set to -1

How can I create a clickable button? https://i.sstatic.net/BXOjz.png Feel free to check out the sandbox example here: https://codesandbox.io/s/m5w3y76mvy ...

cssreactjsbuttonmaterial-uiz-index

I am looking to adjust the width of an element within an Iframe

In my single post, I have a social sidebar on the left side. Currently, the buttons in the sidebar are appearing in different sizes, but I want them all to be the same size as the "Twitter" button. To see the issue, please visit this link. I've tried ...

javascriptjquerycssiframe

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

javascriptjquerycssonkeydown

Having trouble setting a background image for my CSS button

Recently started experimenting with button styles and I wanted to create a design where there is a background image on the left of the button with text located on the right side of the image. Here's the code snippet I've been working on. Here&apo ...

cssbuttonstyling

Event Triggering in CakePHP

I am struggling with the onChange event in this code snippet. I must have overlooked something because it's not functioning as expected. Can someone please point out my mistake? Your assistance is greatly appreciated: <td class="cellInput"> & ...

htmlcakephponchange

create a recurring design wallpaper within the TinyMCE editor

One of my functions alters the background of the tinymce editor. However, I am interested in having a wallpaper repeat in a similar fashion to background-repeat: repeat; in CSS. How can I achieve this? Here is the function: function SettinymceImage(bg_i ...

javascriptcsstinymcetinymce-4

What is the correct way to include variables {{var}} within a {{#each}} loop?

I'm curious if there's a way to include double-stashed {{var}} embeds in my HTML code. Here is an example: I have the .hbs code below: {{#each tables.books.data}} <tr> <td>...</td> <td>...</td> </tr> {{/eac ...

jqueryhtmlhandlebars.js

Learn how to easily reset the index value within the same template in Angular

In my template, I have 3 tables with the same JSON data as their parent elements. <tbody> <ng-container *ngFor="let row of reportingData.RecommendationData; let i=index"> <tr *ngIf="row.swRecommendations"> <td& ...

htmlangularhtml-table

Centering numerous elements on all screen sizes and devices

Is there a way to align elements in the center of the screen both vertically and horizontally without specifying width and height for mobile and desktop views? How can I make it responsive so that it appears centered on all devices? .parent-container{ ...

htmlcss

Modifying the href in Django according to the current page URL: a step-by-step guide

Like the title suggests, I'm curious about the proper way to dynamically change a link's href based on the current URL that the user is visiting. I attempted a solution, but it proved unsuccessful. {% if url == '' %} href='/cooki ...

pythonhtmldjango

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...

cssvue.js

Transforming the pen into a creative assortment of animated social media icons for top-notch production

My goal is to incorporate animated social media icons on my website using only CSS without any JavaScript. I came across a pen called "Yet Another Set of Animated Social Icons" that I'm attempting to modify. The issue at hand is that instead of the c ...

htmlcssbrowser

Tips on adding style to your jQuery autocomplete dropdown

I am currently utilizing jQuery autocomplete functionality. I have configured it to communicate with a service and retrieve records: <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1 ...

javascriptjquerycssjquery-ui-autocomplete

Show HTML element after scrolling 50 pixels on the page

I am looking to add a feature in my Angular application where a DOM element becomes visible as soon as the user scrolls down by 50 pixels. Is there a method or process available within Angular to achieve this effect? ...

cssangularjsscrollangularjs-directive

Issues with Media Query in Mobile Device Footer not Resolving

Despite searching through numerous pages on Stack, I have not been able to find a solution. I am attempting to remove the footer on mobile devices using a media query. Unfortunately, it does not seem to be effective on the device, although it works when th ...

phpcssmedia-queries

jQuery is not active on responsive designs

I have implemented a script in my JavaScript code that changes the color of the navigation bar when scrolling. The navigation bar transitions to a white color as you scroll down. However, I am facing an issue with responsiveness and would like to deactivat ...

javascriptjquerycssresponsive

Reordering Bootstrap 4.1 columns for improved visibility on smaller screens

I'm having trouble adjusting the column order for small screen resolutions in Bootstrap 4.1. I've added the order prefix but nothing seems to be changing. Here is a snippet of my HTML code. Can anyone offer assistance? <div class="container-f ...

cssbootstrap-4

"Exploring the world of JavaFX: Unveiling the mysteries

Here are some CSS queries: How can I create a semi-transparent color using a color variable in CSS? * { -my-color: #123456; } .label { -fx-text-fill: ??? } What should be inserted in "???" to achieve a 50% opacity version of -my-color? Is it be ...

cssjavafx

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

cssnode.jsnpmsass

Change the font awesome class when the button is clicked

Here is the code I have in this jsfiddle. I am trying to change the font awesome icon on button click using javascript, but it doesn't seem to be working. I am new to javascript, so please pardon me if this is a silly question. HTML <button id="f ...

javascriptjqueryhtmlfont-awesome