CODEWITHSUNDEEP
htmlcsscheckboxflexbox
David Nnamremmiz
David Nnamremmiz

Reputation: 201

Flexbox resizes a checkbox (too small)

I've got a HTML formular-list with checkboxes. All checkboxes have a label.

I'm styling this formular with flexbox. Using flexbox makes one of the checkboxes smaller than all the others. The reason seems to be that the label text for that checkbox is so long that it needs to be wrapped in the next line.

.filter-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.filter-list input[type=checkbox] {
    margin-right: 2rem;
    height: 20px;
    width: 20px;
}
<li>
    <input class="filterCheckbx" id="filter1" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter1">Hochschule</label>
</li>
<li>
    <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>
<li>
    <input class="filterCheckbx" id="filter3" type="checkbox" name="section" value="Bauen & Gestalten">
    <label for="filter3">Bauen & Gestalten</label>
</li>
<li>
    <input class="filterCheckbx" id="filter4" type="checkbox" name="section" value="BWL">
    <label for="filter4">BWL</label>
</li>
<li>
    <input class="filterCheckbx" id="filter5" type="checkbox" name="section" value="Informatik">
    <label for="filter5">Informatik</label>
</li>
<li>
    <input class="filterCheckbx" id="filter6" type="checkbox" name="section" value="Logistik">
    <label for="filter6">Logistik</label>
</li>

And of course here's a Plunkr demo: http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH?p=preview

Here is an example with flexbox:

with flexbox

without flexbox

Anybody got an idea how to solve this issue?

Upvotes: 14

Views: 11801

Answers (5)

Michael Fulton
Michael Fulton

Reputation: 4940

You can set flex:none on items you don't want resized as part of flex calculations.

The following Information is from Tailwind CSS documentation but this applies to pure CSS too: https://tailwindcss.com/docs/flex#none

Use flex: 0 1 auto; to allow a flex item to shrink but not grow, taking into account its initial size.

Use flex: 1 1 0%; to allow a flex item to grow and shrink as needed, ignoring its initial size:

Use flex: 1 1 auto; to allow a flex item to grow and shrink, taking into account its initial size:

Use flex: none; to prevent a flex item from growing or shrinking:

Upvotes: 6

Sophie Alpert
Sophie Alpert

Reputation: 143134

I witnessed this bug on iOS Safari 13.1 – as @vsync says, this looks like a WebKit bug when using a <input> as a flex child.

I was able to work around this by adding an extra wrapper <div> around the checkbox. That is, instead of

<li>
    <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>

writing

<li>
    <div>
        <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    </div>
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>

In my testing, this solution correctly sizes the left column to be only as wide as needed to fit the checkbox.

Upvotes: 2

lukemcd
lukemcd

Reputation: 1501

If you add min-width to the input in addition to width it appears to resolve the issue for me.

input[type=checkbox]{
    margin-right: 2rem;
    height: 20px;
    width: 20px;
    min-width: 20px;
}

Upvotes: 7

vsync
vsync

Reputation: 130185

This happens because of a bug in Webkit, which shouldn't affect checkboxes size when they are places as a flex-child.

Demo page

body{ font:14 Arial; }

label {
	display: inline-block;
	line-height: 1.2;
	margin-bottom: 2px;
	cursor: pointer;
}

label.checkbox {
	display: inline-flex;
}

label.checkbox > input {
	line-height: 2;
	margin: 4px 0 0 0;
	width: 35px; /* THE FIX */
}
<label class='checkbox'>
  <input type="checkbox" />
  This is a very verryyyyy long label for a checkbox item, try to click it!
</label>

Upvotes: 2

KCarnaille
KCarnaille

Reputation: 1057

Add for the inputs:

flex: 1;

And for the labels:

flex: 2;

It works for me on chrome, firefox, IE.

Upvotes: 11

Related Questions