How to show multiple radioButtons in two columns

Question

I am showing radio buttons dynamically in two columns. As you can see in picture

It looks fine in few conditions but sometimes when text is large it looks off. How can I resolve this issue

Here is some code:

.radiobox-padding-top{
    padding-top:15px;
}

input[type=radio] {
  float: left;
  display: block;
  margin-top: 4px;
}

label {
  margin-left: 15px;
  display: block;
}

here is html code (I am using angular)

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">

  <div class="col-12" >
    <p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
  </div>

  <div class="row" style="margin: 0px">
    <div class="col-12 radiobox-padding-top">
      <div class="form-group">

        <span *ngFor="let entry of options; index as i">

          <div class="col-5 inlineBlock">
            <div class="radio">

              <input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
              <label>
                {{options[i]}}
              </label>
            </div>
          </div>

        </span>

      </div>
    </div>
  </div>
</div>

As shown in pic, in first section, right side is not aligned with the left side. I need to fix it — Zohab Ali, Oct 29 '18 at 08:14
can you show the HTML for your radio inputs, where is the class, are there wrappers, etc? there also may be other CSS rules in here that you didn't show and that are necessary for this display — Kaddath, Oct 29 '18 at 08:15
I have updated my question @Kaddath, I am using another CSS file but it doesnt contain anything related to radioButton component — Zohab Ali, Oct 29 '18 at 08:19
Fix your broken HTML first of all - you can not nest div in span. And then, it sounds to me like you simply want to specify `vertical-align` ...? — misorude, Oct 29 '18 at 08:46

Tommy · Accepted Answer · 2018-10-29T08:47:59.923

I have created a running stackblitz.

Modify your code like this:

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">

  <div class="col-12" >
    <p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
  </div>

  <div class="row" style="margin: 0px">
    <div class="col-12 radiobox-padding-top">
      <div class="form-group">
        <div class="row">    
          <div class="col-6" *ngFor="let entry of options; index as i">    
            <div class="inlineBlock">
              <div class="radio">
                <input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
                <label>
                  {{options[i]}}
                </label>
              </div>
            </div>
          </div>    
        </div>
      </div>
    </div>
  </div>
</div>

Additionally change your CSS like this:

.radiobox-padding-top{
  padding-top:15px;
}

input[type=radio] {
  float: left;
  margin-top: 4px;
}

label {
  padding-left: 5px;
  margin-left: 15px;
  display: block;
}

For more informations about bootstrap breakpoints have a look here.

it looks fine in most cases but still when I give a long text to an option then text shifts to the new line. you can check that in your created stackblitz. — Zohab Ali, Oct 29 '18 at 08:42
My fault. I updated my css-code above to work properly with long option texts. This should solve your problem. — Tommy, Oct 29 '18 at 08:48
Genius! Thanks for your time and for understanding the question properly because most of guys are down voting this question just because they weren't able to solve it :) — Zohab Ali, Oct 29 '18 at 08:55

How to show multiple radioButtons in two columns

1 Answers1