Angular HTML - trying to align buttons & input in a row

Question

I have a button set which needs to stay together to the right end of the row and and I have an input field that should be at the left end of the row. Trying out the CSS grid fr unit. It works sometimes, but on screens with low resoltuions, some buttons are not seen at all.

HTML

 <div class="filterButtonsDiv">
        <div style="margin-left:15px">
            <mat-form-field>
                <input style="border:none" matInput placeholder="Filter">
            </mat-form-field>
        </div>
        <div style="float:right">
            <button class="filterButtons">
                <b>Clear</b>
            </button>
            <button class="filterButtons" *ngFor="let button of filterCrew">
                <b>{{ button.text }}</b>
            </button>
        </div>
    </div>

CSS

.filterButtonsDiv {
  display:grid;
  grid-gap: 2px;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 22px;
}

Here in the picture below those set of buttons should be in the very right.

Navdeep Singh · Accepted Answer · 2018-06-12 05:06:56Z

1

For low resolutions, change the UI for right Filter options (like Hamburger menu or anything)

For current UI issue, Check code below

.wrapper {
  background-color: skyblue;
}
.filterButtonsDiv {
  display:grid;
  grid-gap: 2px;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 22px;
}
.filterButtons-wrapper {
  text-align: right;
}

<div class="wrapper">
<div class="filterButtonsDiv">
        <div>
            <mat-form-field>
                <input style="border:none" matInput placeholder="Filter">
            </mat-form-field>
        </div>
        <div class="filterButtons-wrapper">
            <button class="filterButtons">
                <b>Clear</b>
            </button>
            <button class="filterButtons" *ngFor="let button of filterCrew">
                <b>{{ button.text }}</b>
            </button>
        </div>
    </div>  
</div>

answered Jun 12, 2018 at 5:06

Navdeep Singh

1811 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sumchans Over a year ago

Thanks @Navdeep exactly the way I wanted it.

Navdeep Singh Over a year ago

Welcome Bro! :)

Collectives™ on Stack Overflow

Angular HTML - trying to align buttons & input in a row

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest