CODEWITHSUNDEEP
htmlcsssassangular-material
user5155835
user5155835

Reputation: 4742

Right Aligned elements not staying on one line

I want to place some elements on the left and some the right. But the elements on the right are not staying on line, especially after addition of mat-form-field. I'm getting:

enter image description here

On the right side, the Right Button and the Icon are on the same line, but the mat-form-field does not stay with them on the same line.

My html is:

<div class="mat-table-container">
    <div class="mat-table-button-wrapper">
        <div id="left-aligned-wrapper">
            <button class="btn btn-primary"> 
                Left Button
            </button>
        </div>
        <div id="right-aligned-wrapper">
            <mat-form-field appearance="standard">
              <input matInput placeholder="Placeholder">
            </mat-form-field>
            <button type="button" mat-button>
              Right Button
            </button>
            <button class="btn btn-default">
              <i class="my-icon my-icon-filter"></span>
            </button>
        </div>
    </div>
</div>

My CSS is:

.mat-table-container {
  position: relative;
  .mat-table-button-wrapper {
    height: 50px;
    padding-left: 0em;
    padding-top: 1em;
    #left-aligned-wrapper {
      float: left;
    }  
    #right-aligned-wrapper {
      float: right;
    }
  }
}

What could be going wrong here?

Upvotes: 2

Views: 71

Answers (2)

Keyur Gajjar
Keyur Gajjar

Reputation: 360

Please applied width: 50% in both elements. Or use display: flex property.

.mat-table-button-wrapper {
  display: flex;
  align-item: center;
  justify-content: space-between;
}

Upvotes: 1

Job
Job

Reputation: 485

I would recommend you use flexbox instead of float in this situation.

This would result in your CSS looking something like this:

.mat-table-container {
  position: relative;
  .mat-table-button-wrapper {
    height: 50px;
    padding-left: 0em;
    padding-top: 1em;
    display: flex;
    justify-content: space-between;
  }
}

i.e. removing applying display: flex to your wrapper class and using justify-content: space-between to space your content accordingly.

This would also make sure your content doesn't jump to the next 'line'.

Upvotes: 1

Related Questions