CODEWITHSUNDEEP
htmlcssangular
Blak
Blak

Reputation: 525

How do I increase the width of a mat-select form in Angular Material?

I'm trying to increase the width of the mat select form dynamically based on the available space while keeping the title of the form to the left. My solution below increases the width of the form but places the title above the form and not to the left.

Dropdown style:

mat-form-field {
  width: 100%;
}

html:

<span style="font-size: large; "> Subject Area </span>
<mat-form-field>
     <mat-label>Select a Subject Area</mat-label>
     <mat-select>
         <mat-option *ngFor="let subjectArea of subjectAreas" [value]="subjectArea.value">
             {{subjectArea.viewValue}}
         </mat-option>
     </mat-select>
</mat-form-field>

Edit: The title is now to the left of the form but is wrapping. There is sufficient space on the web page to keep all of the titles in one line. Is this due to the material grid list organizing three separate forms in the center of the page? New Issue

Upvotes: 3

Views: 15994

Answers (2)

WSD
WSD

Reputation: 3587

Take a look to this Blitz: https://stackblitz.com/edit/angular-mat-select-example-icf9op

The idea is simple: Wrap your mat-form-field elements within a container and set the container's display to flex.

<div class="form-field-group">
 <span class="form-field-label">Your Country:</span>
   <mat-form-field>
      <mat-label>Country:</mat-label>
     <mat-select name="countryString" [(value)]="selectedCountry">
        <mat-option [value]="'GB'">Great Britain</mat-option>
        <mat-option [value]="'US'">United States</mat-option>
        <mat-option [value]="'CA'">Canada</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

And the SCSS to make it work:

.form-field-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  .form-field-label {
    white-space: nowrap;
  }
  .form-field-label + mat-form-field {
   margin-left: 10px;
  }
  mat-form-field {
    width:100%;
  }
}

Upvotes: 2

Jean-Bryce Beirnaert
Jean-Bryce Beirnaert

Reputation: 1

I am not sure about what your are asking, but if it is how to place your component it is not a mat-select issue, it is an HTML/CSS one. I made a quick exemple of what your asking with your title on the left side and the mat-select on the right side (with all the available space left for the mat-select).

I hope it will help !

(those classes come from bootstrap4)

.row {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
}
.col {
  -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
.col, col-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col {
  flex-basis: 0;
  -webkit-box-flex: 1;
  flex-grow: 1;
  max-width: 100%;
}
.border {
  border: 1px solid;
}
.text-center {
  text-align: center;
}
.my-auto {
  margin-bottom: auto;
  margin-top: auto;
}
.w-100 {
  width: 100%
}
<div class="row">
  <div class="col-auto my-auto border">
    <span>my title</span>
  </div>
  <div class="col text-center">
    <div class="w-100 border">
      <span>
        my select
        <br>
        which is big
      <span>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions