CODEWITHSUNDEEP
htmlcssangulartwitter-bootstrap
vasilios kinetikos
vasilios kinetikos

Reputation: 1

How to prevent overlapping of text label of checkboxes for inline checkboxes?

I have the following form written to have inline multiple checkboxes

<form>
    <div class="form-row">
        <div class="form-group form-check">
            <label for="banana" class="form-check-label checkbox-inline">
              <input type="checkbox" id="banana" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
               Bananas
            </label>
    
            <label for="Pineapples" class="form-check-label">
            <input type="checkbox" id="Pineapples" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
            Pineapples</label>
           
            <label for="Woodapple" class="form-check-label">
            <input type="checkbox" id="Woodapple" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
            Woodapple</label>
           
            <label for="Berries" class="form-check-label">
            <input type="checkbox" id="Berries" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
            Berries</label>
        </div>
    </div>
</form>

But the issue is the text label of checkboxes gets overlapped with the next one, shown on this image

How do i prevent this overlapping and make the text clearly visible in all checkboxes?

UPDATE I have made the changes according to what "linker" ( see below ) has suggested but i still get the same issue

code

       <div class="form-row">
            
            <div class="form-group form-check">
             
              <section class="checkbox-section">
                  <label for="banana" class="form-check-label">
                      <input type="checkbox"  formControlName="bananas"  id="banana" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.bananas.errors }" />
                      Bananas
                    </label>
            
                    <label for="Pineapples"class="form-check-label">
                    <input type="checkbox"   formControlName="pineapples"  id="Pineapples" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.pineapples.errors }" />
                    Pineapples</label>
                  
                    <label for="Woodapples"  class="form-check-label">
                    <input type="checkbox" formControlName="woodapples" id="Woodapples" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
                    Woodapple</label>
                  
                    <label for="Berries"  class="form-check-label">
                    <input type="checkbox"  formControlName="berries" id="Berries" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
                    Berries</label>

              </section>

            </div>
      
          </div>

.checkbox-section {
    display: flex;
    align-content: center;
    align-items: center;
    height: 60px;
  }

Result here is the generated checkboxes

Upvotes: 0

Views: 639

Answers (1)

Srijon Chakraborty
Srijon Chakraborty

Reputation: 2164

You can use section tag <section></section> link below=>

<form>
    <div class="form-row">
        <div class="form-group form-check">
             <section>
          <label for="banana" class="form-check-label checkbox-inline">
                      <input type="checkbox" id="banana" class="form-check-input"/>
                      Bananas
                    </label>

          <label for="Pineapples" class="form-check-label">
                    <input type="checkbox" id="Pineapples" class="form-check-input"/>
                    Pineapples</label>

          <label for="Woodapple" class="form-check-label">
                    <input type="checkbox" id="Woodapple" class="form-check-input" />
                    Woodapple</label>

          <label for="Berries" class="form-check-label">
                    <input type="checkbox" id="Berries" class="form-check-input" />
                    Berries</label>
       </section>
        </div>
    </div>
</form>

NOTE: Please check the link StackBlitz

Upvotes: 1

Related Questions