1728405 - Checkbox input types disappears when floated left inside a <div> with `columns` CSS attribute

Status: RESOLVED DUPLICATE of bug 1441048

(Core :: Layout: Form Controls, defect, P3)

Description

[mark.leppke]

Attachment: screenshot showing how the first element in second column disappears

I had this happen when developing an angular app.

HMTL Structure is like this

<section class="grid--column__two">
<angular tag > <!-- Repeating component -->
<input class="form-radio-button">
<label class="form-radio-label"></label>
</angular tag
</section>

CSS
.grid--column__two { column-count: 2; }
.form-radio-button { float: left: }

Conditions to replicate:

• odd number of children in the columns
• form input is floated left
• content is not static, e.g. firefox has to wait for data to return to paint the area

Any time there is an odd number of elements the first radio button in the second column disappears. This doesn't happen with static html elements. if I hard code a bunch of html inputs and labels in a div they show up fine.

It's only when data is being loaded and firefox is waiting on data to paint the area when the radio buttons disappear. And only when the element is floated.

I was able to work around this with a CSS "hack" by changing the positioning to absolute. Normally that shouldn't need to be positioned absolutely.

+++ This bug was initially created as a clone of Bug #1405406 +++

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171002181526

Steps to reproduce:

I created a <div> with the following CSS: columns: 3;. Inside that <div> I placed multiple child <div>s. Inside those child <div>s are a checkbox input and a label element. The checkbox has a CSS for float: left; applied. Here's a jsfiddle as an example: https://jsfiddle.net/t4rn4u81/

Actual results:

The checkbox in the first div that breaks into a new column disappears.

Expected results:

The checkbox should not disappear.

Comment 1

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

https://jsfiddle.net/t4rn4u81/ is no longer accessible. This bug looks very similar to bug 1441048, which is already fixed. If this is still an issue, feel free to reopen this with a reproducible testcase, or file a new bug. Thanks!

Comment 2

[Jonathan Watt [:jwatt]]

And in bug 1405406 comment 8 you said the patch on 1441048 should fix this too. So as you say, hopefully fixed.