0

I've been trying to fix a css flow layout issue that appears only on Chrome.

I have a set of radio buttons with labels below that should be rendered in one row like this:

enter image description here

Chrome renders the buttons like this, however:

enter image description here

Here's a link to the js fiddle: https://jsfiddle.net/xk6zL91y/13/

.buttonsRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  border: none;
  padding: 2rem 0rem;
}

.buttonContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.buttonContainer > input {
    width: auto;
}
<div class='columnLayout'>
  <h2>HEADER</h2>
  <fieldset id='dummy' class='buttonsRow'>
    <div class='buttonContainer'>
      <input type='radio' id='0' name='0' value='0' />
      <label for='0'>0</label>
    </div>
    <div class='buttonContainer'>
      <input type='radio' id='1' name='1' value='1' />
      <label for='1'>1</label>
    </div>
    <div class='buttonContainer'>
      <input type='radio' id='2' name='2' value='2' />
      <label for='2'>2</label>
    </div>
  </fieldset>
</div>
bhr
  • 2,279
  • 1
  • 23
  • 31

1 Answers1

2

Instand of fieldset put elements in div and it will works. For some reason it can't works when you use it in fieldset.

Predrag Davidovic
  • 1,411
  • 1
  • 17
  • 20