CODEWITHSUNDEEP
angulartwitter-bootstrapbootstrap-4angular-bootstrap
cpiock
cpiock

Reputation: 1304

Nested input-group in Angular component

I have created a input component and a datepicker component in angular. My input component creates in base of a type parameter the right input tag for text, number ecc. for the date picker i create another component that hosts a ngb-datepicker. Input component:

    <div class="input-group input-group-sm">
    <ng-container [ngSwitch]="type">
      <ng-container *ngSwitchCase="'date'">        
        <app-date-picker [id]="object.id" [name]="object.id" [disabled]="disabled" (focus)="focus()" (focusout)="focusout()" [(ngModel)]="value"></app-date-picker>
      </ng-container>
<div class="input-group-append" #ref>
  <span *ngIf="unit" class="input-group-text" [ngClass]="{
    'disabled': disabled, 
    'focused': focused}">{{unit}}</span>
  <span class="input-group-text" [ngClass]="{'focused': focused}" *ngIf="!disabled && !readonly && !isValidationOff">
    <app-quality-status #qualityStatus [objects]="[object]" [hide]="hideQualityStatus"></app-quality-status>
  </span>
</div>

<div class="input-group-append" #ref>
  <ng-content></ng-content>
</div>

Datepicker component:

    <div class="input-group input-group-sm">
  <input class="form-control" name="dp" [(ngModel)]="selectedDate" ngbDatepicker #d="ngbDatepicker" (change)="onDateChange($event.target.value)" (dateSelect)="onDateSelect($event)" [disabled]="isDisabled ? 'disabled' : null">
  <div class="input-group-append">
    <button class="btn btn-input calendar fa fa-calendar" (click)="d.toggle()" type="button" [disabled]="isDisabled ? 'disabled' : null"></button>
  </div>
</div>

With this nested input-group div the result is that I have a control that doesn't use the whole space but only the half. If I remove the input-group in the datepicker component the problem is that my button isn't align with the text box. enter image description here

enter image description here

How can I solve this kind of problem?

UPDATE 23.10.2019

Here is my stackblitz sample https://stackblitz.com/edit/angular-pbabtg

Upvotes: 0

Views: 2531

Answers (2)

Akber Iqbal
Akber Iqbal

Reputation: 15031

added 2 things to the <hello> component

  • class='form-control' which is needed to input-group-append
  • style='padding:0px' since this padding was putting the input a little outside

relevant app.component.html:

<p>
    Sample for boostrap nested input-group
</p>
<div class="row form-group form-group-sm">
    <div class="col-md-12">
        simple input box - works !
    <div class="input-group input-group-sm">  
            <input type="number" class="form-control" placeholder="">
            <div class="input-group-append" #ref>
                <span class="input-group-text" >Unit</span>
                <span class="input-group-text">
          <span class="help">
            Help
          </span>
                </span>
            </div>
            <div class="input-group-append" #ref>
                <ng-content></ng-content>
            </div>
        </div>
    </div>

    <div class="col-md-12">
    Only my custom component - works !
        <hello name="{{ name }}"></hello>
    </div>

    <div class="col-md-12">
    My custom component in a input-group - fails !
<div class="input-group input-group-sm">
            <hello name="{{ name }}" class='form-control' style='padding:0px' ></hello>
            <div class="input-group-append" #ref>
                <span class="input-group-text" >Unit</span>
                <span class="input-group-text">
          <span class="help">
            Help
          </span>
                </span>
            </div>
            <div class="input-group-append" #ref>
                <ng-content></ng-content>
            </div>
        </div>
    </div>
</div>

complete working stackblitz here

Upvotes: 0

Daniel
Daniel

Reputation: 1612

Try adding the following css to hello.component

:host {
  display: flex;
  flex: auto;
}

Upvotes: 2

Related Questions