Link to home
Create AccountLog in
Avatar of Zolf
ZolfFlag for United Arab Emirates

asked on

HTML fields not positioning properly

Hi there,


I have this four fields which shows properly for large screen but when I reduce the screen size the last field called Height shifts to the right. After investigating using dev tools, it seems this div does not have margin-right. But in the code I see all for div are identical but for some reason the last field skips this parameter and that is the reason why it shifts to the right. I have attached video and screenshot of the issue. Please help me to understand why this behaviour is occurring.


cheers

Zolf


<h4 class="mrgn-b-md">{{'Barcode dimensions (mm)'|translate}}</h4>
<div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap.gt-sm="30px">
    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="calc(50% -30px)" fxFlex.lg="calc(50% -30px)">
        <mat-form-field class="full-wid mrgn-b-sm">
            <input matInput type="number" class="form-control" placeholder="Left"
                   formControlName="barcodeLeft"
                   step="0.1">
        </mat-form-field>
    </div>
    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="calc(50% -30px)" fxFlex.lg="calc(50% -30px)">
        <mat-form-field class="full-wid mrgn-b-sm">
            <input matInput type="number" class="form-control" placeholder="Top"
                   formControlName="barcodeTop"
                   step="0.1">
        </mat-form-field>
    </div>
    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="calc(50% -30px)" fxFlex.lg="calc(50% -30px)">
        <mat-form-field class="full-wid mrgn-b-sm">
            <input matInput type="number" class="form-control" placeholder="Width"
                   formControlName="barcodeWidth"
                   step="0.1">
        </mat-form-field>
    </div>
    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="calc(50% -30px)" fxFlex.lg="calc(50% -30px)">
        <mat-form-field class="full-wid mrgn-b-sm">
            <input matInput type="number" class="form-control" placeholder="Height"
                   formControlName="barcodeHeight"
                   step="0.1">
        </mat-form-field>
    </div>
</div>

Open in new window


User generated image


Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

By removing the fxFlex.lg value, the last field will have the same flex behavior as the other fields, and they should align properly regardless of the screen size. 


Example:

<h4 class="mrgn-b-md">{{'Barcode dimensions (mm)'|translate}}</h4>
<div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap.gt-sm="30px">
    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="calc(50% -30px)">
        <mat-form-field class="full-wid mrgn-b-sm">
            <input matInput type="number" class="form-control" placeholder="Left"
                   formControlName="barcodeLeft"
                   step="0.1">
        </mat-form-field>
    </div>
    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="calc(50% -30px)">
        <mat-form-field class="full-wid mrgn-b-sm">
            <input matInput type="number" class="form-control" placeholder="Top"
                   formControlName="barcodeTop"
                   step="0.1">
        </mat-form-field>
    </div>
    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="calc(50% -30px)">
        <mat-form-field class="full-wid mrgn-b-sm">
            <input matInput type="number" class="form-control" placeholder="Width"
                   formControlName="barcodeWidth"
                   step="0.1">
        </mat-form-field>
    </div>
    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="calc(50% -30px)">
        <mat-form-field class="full-wid mrgn-b-sm">
            <input matInput type="number" class="form-control" placeholder="Height"
                   formControlName="barcodeHeight"
                   step="0.1">
        </mat-form-field>
    </div>
</div>

Open in new window


Avatar of Zolf

ASKER

Thanks for your comments. But it did not make a difference, the issue is still present

Avatar of Zolf

ASKER

Thanks for your comment.

Can you please tell me what css you need to have a look and I can send it here. 

Ignore my previous comment.

ASKER CERTIFIED SOLUTION
Avatar of gr8gonzo
gr8gonzo
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account