CODEWITHSUNDEEP
angularhtmlcss
Sumchans
Sumchans

Reputation: 3784

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

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. enter image description here

Upvotes: 0

Views: 2453

Answers (1)

Navdeep Singh
Navdeep Singh

Reputation: 181

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>

Upvotes: 1

Related Questions