flex layout column implementation

Published

How to correctly use flex layout to implement the ff design , I tried using fxLayout="row" fxLayoutAlign="space-evenly center" but as you can see on the current output the [Subtenant name] and Current lease Expiration should have the same distance with the design but on my current output it is not.

Anyone has any idea? Thanks.

#design I wanna implement
enter image description here

#my current output

enter image description here

#html code

 <div class="deal-form-btn-group" fxLayout="row" fxLayoutAlign="start center"   >
              <div  fxLayout="row" fxLayoutAlign="space-evenly center"  >
                <div class="deal-form-btn-group-radio">
                  <div class="pharmacy-checkbox">
                    <mat-checkbox
                     color="primary"
                     style="margin-left:10px;">
                     <div class="deal-text-label">
                       [Subtenant name]
                    </div>
                    </mat-checkbox>  
                    </div>
                </div>
              </div>
              <div  fxLayout="row" fxLayoutAlign="space-evenly center"  >
                <mat-form-field appearance="fill" class="buyout-form-date-picker">
                  <mat-label>Current Lease Expiration</mat-label>
                    <input 
                      matInput   
                      [min]="currentDate"                
                      [matDatepicker]="estimatedClosingDate" 
                      [(ngModel)]="dealDispositionFormFields.estimatedClosingDate"
                      [required]="isExistingDeal">
                    <mat-datepicker-toggle matSuffix [for]="estimatedClosingDate"></mat-datepicker-toggle>
                    <mat-datepicker #estimatedClosingDate></mat-datepicker>
                </mat-form-field>      
              </div>

Source: Angular Questions

Published
Categorized as angular, css, flexbox Tagged , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq