CODEWITHSUNDEEP
twitter-bootstraprows
Sina Sohi
Sina Sohi

Reputation: 2779

Bootstrap column acting improperly

I have have an angular2 project where I want to create some radio buttons using columns. (If any other methods please suggest). I have the following code:

<div class="row">
                <div class="col-xl-7 col-lg-7 col-md-9 col-sm-12 col-xs-12" style="margin-top: 4px;">
                  <label [ngClass]="{'custom-radio-error': (myForm.controls.group.pristine && submitted)}" class="radio-inline custom-radio">
                    <input [(ngModel)]="data.group" type="radio" name="group" id="inlineRadio1" value="1" formControlName="group">
                    <span class="row">
                      <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1">
                        1.
                      </div>
                      <div class="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-xs-11">
                        Prescribed Ocaliva – patient has not yet started the medication at inclusion
                      </div>
                    </span>
                  </label>
                </div>
                <div class="col-xl-7 col-lg-7 col-md-9 col-sm-12 col-xs-12" style="margin-top: 8px;">
                  <label [ngClass]="{'custom-radio-error': (myForm.controls.group.pristine && submitted)}" class="radio-inline custom-radio">
                    <input [(ngModel)]="data.group" type="radio" name="group" id="inlineRadio2" value="2" formControlName="group">
                    <span class="row">
                      <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1">
                        2.
                      </div>
                      <div class="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-xs-11">
                        UDCA responders taking UDCA – (with ALP &le; 1,67 ULN)
                      </div>
                    </span>
                  </label>
                </div>
                <div class="col-xl-7 col-lg-7 col-md-9 col-sm-12 col-xs-12" style="margin-top: 8px;">
                  <label [ngClass]="{'custom-radio-error': (myForm.controls.group.pristine && submitted)}" class="radio-inline custom-radio">
                    <input [(ngModel)]="data.group" type="radio" name="group" id="inlineRadio2" value="3" formControlName="group">
                    <span class="row">
                      <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1">
                        3.
                      </div>
                      <div class="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-xs-11">
                        UDCA inadequate-responders on stable UDCA 10-15 mg/kg/day as standard of care, with the option to use other second-line treatments such as budesonide or fibrates - not treated with Ocaliva - (with ALP > 1,67 ULN)
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>

This code gives me the following output, which has different column sizes for each row depending on the window size: https://gyazo.com/f08bdaefd6e6e289c38c3143242319db

If I make the window smaller it looks fine, because the the textlines have equal width: https://gyazo.com/bd766c7cc824b0e02721a9475a0127af

The second picture is how I imagine column ALWAYS acting like. Why am I getting this weird thing on picture one and how do I fix it?

Any help is greatly appreciated!

Upvotes: 0

Views: 105

Answers (1)

Banzay
Banzay

Reputation: 9470

Since label is inline element, its width depends on children length. Therefore as you paste class="row" inside a label, row width will depend of text length. Then grid cell inside row will vary. Next mistake is - you assign class=row to span, which is inline element as well as label. div suits for that much better.

Anyway there is a trick to solve a problem. As far as label will arise depending its content till it reaches parent width, to avoid variation of label width you just need to fix it inside parent container:

label {
  width: 100%;
}

You may put any number of % you wish.

Upvotes: 1

Related Questions