1

JSFiddle here.

I have a div containing many radio buttons. I want a way to do this: Only 4 radio buttons are displayed in one column, after which the next 4 of the radio buttons are shown in the next column, and so on...

From my SO search, I found this way from this question:

.mdl-radio {
  display: block;
  margin: 15px auto;
}

.mdl-radio,
.choose-message-caption {
  margin: 25px;
}

.radiobuttons-container {
  height: 100vh;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

label.mdl-radio {
  display: inline-block;
}
<div class="radiobuttons-container">

  <label for="sacha" class="mdl-radio mdl-js-radio">
    <input id="sendAuthenticationInfo" class="mdl-radio__button" type="radio" name="map-message" value="sacha" /> 
    <span class="mdl-radio__label">Sacha</span>
</label>

  <label for="bob" class="mdl-radio mdl-js-radio">
    <input id="bob" class="mdl-radio__button" type="radio" name="map-message" value="bob" />
    <span class="mdl-radio__label">Bob</span>
</label>

  <label for="marley" class="mdl-radio mdl-js-radio">
    <input id="marley" class="mdl-radio__button" type="radio" name="map-message" value="marley" />
    <span class="mdl-radio__label">Marley</span>
</label>

  <label for="canny" class="mdl-radio mdl-js-radio">
    <input id="canny" class="mdl-radio__button" type="radio" name="map-message" value="canny" />
    <span class="mdl-radio__label">Canny</span>
</label>

  <label for="amy" class="mdl-radio mdl-js-radio">
    <input id="amy" class="mdl-radio__button" type="radio" name="map-message" value="amy" />
    <span class="mdl-radio__label">Amy</span>
</label>

  <label for="popye" class="mdl-radio mdl-js-radio">
    <input id="popye" class="mdl-radio__button" type="radio" name="map-message" value="popye" />
    <span class="mdl-radio__label">Popye</span>
</label>

  <label for="insider" class="mdl-radio mdl-js-radio">
    <input id="insider" class="mdl-radio__button" type="radio" name="map-message" value="insider" />
    <span class="mdl-radio__label">Insider</span>
</label>

  <label for="dogma" class="mdl-radio mdl-js-radio">
    <input id="dogma" class="mdl-radio__button" type="radio" name="map-message" value="dogma" />
    <span class="mdl-radio__label">Dogma</span>
</label>

  <label for="rowdy" class="mdl-radio mdl-js-radio">
    <input id="rowdy" class="mdl-radio__button" type="radio" name="map-message" value="rowdy" />
    <span class="mdl-radio__label">Rowdy</span>
</label>

  <label for="albumin" class="mdl-radio mdl-js-radio">
    <input id="albumin" class="mdl-radio__button" type="radio" name="map-message" value="albumin" />
    <span class="mdl-radio__label">Albumin</span>
</label>

  <label for="donna" class="mdl-radio mdl-js-radio">
    <input id="donna" class="mdl-radio__button" type="radio" name="map-message" value="donna" />
    <span class="mdl-radio__label">Donna</span>
</label>

  <label for="eli" class="mdl-radio mdl-js-radio">
    <input id="eli" class="mdl-radio__button" type="radio" name="map-message" value="eli" />
    <span class="mdl-radio__label">Eli</span>
</label>

  <label for="rose" class="mdl-radio mdl-js-radio">
    <input id="rose" class="mdl-radio__button" type="radio" name="map-message" value="rose" />
    <span class="mdl-radio__label">Rose</span>
</label>

</div>
<!-- .radiobuttons-container -->

The problem is that as I drag the JSFiddle output panel's left edge to change its width, the output is displayed in multiple columns in a weird way.

And when I wrote a test program in my XAMPP localhost, the output was this weird:

enter image description here

So what is the solution for my problem.

Community
  • 1
  • 1
Shy
  • 542
  • 8
  • 20
  • You can simply use table structure. each congaing 4 and each contain one radio button. – Sanket Shinde Apr 05 '17 at 05:31
  • You'r `column-count` css solution wont work perfectly because the amount of items in one column will depend on container size. The bigger container You'll have the less items per column there will be. To fix the weird alignment of labels you can set some fixed width for the labels i.e. `label.mdl-radio { width: 100px }` – Adam Szmyd Apr 05 '17 at 06:09

1 Answers1

3

Check this fiddle

You just need to specify number of items in a column.

.radiobuttons-container {
    height:100vh;
    -webkit-column-count: 4;
    -moz-column-count:4;
    column-count: 4;
}
Abhay Naik
  • 405
  • 1
  • 4
  • 17
  • As mentioned, need 4 radio's in one column. Currently there are 13 radio's which fits in 4 columns. Increase them and you will have more. – Abhay Naik Apr 05 '17 at 09:02