Question 219370 in Html Question posted in
Some basic documentation can be found here.

Html – Failing to align side-by-side with bootstrap. One of the items is an angular component

<form>
  <div class="row form-check">
    <label class="form-check-label" for="communes">Sélectionnez une commune :</label>
    <app-communes id="communes" anneeCOG="2023"></app-communes>
  </div>
</form>

<div class="row">
  <div class="carte_metropole" id="carte_metropole" ></div>
</div>
[...]

fails to display the label and its selector the way I want:

(I would like to have:
Sélectionnez une commune : [Tapez le nom de la commune] left aligned horizontally)

enter image description here

<app-communes ...> leads here:

<div class="form-check-input">
  <input type="text" list="communesCOG" [(ngModel)]="libelleCommuneSelectionnee" (ngModelChange)="selectCommune($event)"
     placeholder="Tapez le nom de la commune">

  <datalist id="communesCOG">
    <option *ngFor="let commune of communes" [value]="commune.codeCommune">{{commune.nomCommune}} ({{commune.nomDepartement}})</option>
  </datalist>
</div>

I’ve attempted css classes and nestings I’ve found over the Internet, but eventually I’m confused.

@Arleigh_Hix I believe I’ve done what you suggested me, but it isn’t producing the result you have in your demonstration.

enter image description here

Tags:

2

Answers


  1. 0

    .form-check-input is for input[type="checkbox"] not input[type="text"].
    You should remove the .form-check class from your div.row, replace .form-check-label with .form-label, and the div.form-check-input is not needed.
    Make use of .col-* classes for a horizontal form.

    https://getbootstrap.com/docs/5.3/forms/overview/#overview

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<form>
  <div class="row">
    <div class="col-4">
      <label class="form-label" for="communes">Sélectionnez une commune:</label>
    </div>
    <div class="col-8">
      <input type="text" list="communesCOG" [(ngModel)]="libelleCommuneSelectionnee" (ngModelChange)="selectCommune($event)" placeholder="Tapez le nom de la commune">

      <datalist id="communesCOG">
        <option *ngFor="let commune of communes" [value]="commune.codeCommune">{{commune.nomCommune}} ({{commune.nomDepartement}})</option>
      </datalist>
    </div>
  </div>
</form>
<p class="mt-5">
  Below you see the alignment of a form-check-label always allows room for a preceeding checkbox, and will position it there if it is properly nested within the label.
</p>
<form>
  <div class="form-check">
    <label class="form-check-label">form-check-label (no input)</label>
  </div>
  <div class="form-check">
    <label class="form-check-label">form-check-label (input end)<input class="form-check-input" type="checkbox"></label>
  </div>
  <div class="form-check">
    <label class="form-check-label"><input class="form-check-input" type="checkbox">form-check-label (input start)</label>
  </div>

</form>
    Login or Signup to reply.
  2. 0

    You can use d-flex to align items horizontally:

    <form class="d-flex">
   
      <label class="form-label pe-2" for="communes">Sélectionnez une commune:</label>
    
  
     <app-communes id="communes" anneeCOG="2023"></app-communes>
    
</form>

    communes component:

     <input type="text" list="communesCOG" [(ngModel)]="libelleCommuneSelectionnee" (ngModelChange)="selectCommune($event)"
     placeholder="Tapez le nom de la commune">

  <datalist id="communesCOG">
    <option *ngFor="let commune of communes" [value]="commune.codeCommune">{{commune.nomCommune}} ({{commune.nomDepartement}})</option>
  </datalist>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search