CODEWITHSUNDEEP
angularangular-material
Otto Gutierrez
Otto Gutierrez

Reputation: 487

Inline form elements in Angular / Material

I'm trying to design an form that has an input field and right beside it, a button. However, I'm getting the button on top of the input field.

<mat-form-field>
  <input matInput placeholder="Select Spec Folder">
  <button mat-raised-button >Select Folder</button>
</mat-form-field>

Is there a way to have both elements on the same line one after the other?

Thanks

Upvotes: 6

Views: 17759

Answers (4)

Rafael Neto
Rafael Neto

Reputation: 1280

It's posible to use the Angular Material Form Field estructure (div.mat-form-field div.mat-form-field-wrapper), combined with custom styles to create a 100% Angular Material inline form:

<form class="flex gap-4 justify-start items-center">
  <mat-form-field appearance="fill" class="inline">
    <mat-label>Input</mat-label>
    <input matInput />
  </mat-form-field>
  <mat-form-field appearance="fill" class="inline">
    <mat-label>Select</mat-label>
    <mat-select>
      <mat-option value="one">First option</mat-option>
      <mat-option value="two">Second option</mat-option>
    </mat-select>
  </mat-form-field>
  <div class="mat-form-field inline">
    <div class="mat-form-field-wrapper flex gap-4">
      <mat-radio-group class="flex gap-4" aria-label="Select an option">
        <mat-radio-button value="1">Option 1</mat-radio-button>
        <mat-radio-button value="2">Option 2</mat-radio-button>
      </mat-radio-group>
    </div>
  </div>
  <mat-form-field appearance="fill" class="inline">
    <mat-label>Textarea</mat-label>
    <textarea matInput></textarea>
  </mat-form-field>
  <div class="mat-form-field inline">
    <div class="mat-form-field-wrapper flex gap-4">
      <mat-checkbox class="example-margin">Checked</mat-checkbox>
      <mat-checkbox class="example-margin">Indeterminate</mat-checkbox>
    </div>
  </div>
  <div class="mat-form-field inline">
    <div class="mat-form-field-wrapper">
      <button mat-raised-button color="primary">
        <mat-icon>search</mat-icon> Search
      </button>
    </div>
  </div>
</form>

.flex {
  display: flex;
}

.gap-4 {
  gap: 1rem /* 16px */;
}

.justify-start {
  justify-content: flex-start;
}

.items-center {
  align-items: center;
}

.inline {
  display: inline;
}

See it in action on StackBlitz ↗

Upvotes: 0

Vikas Gupta
Vikas Gupta

Reputation: 1233

It is suggested by Angular material site,

You could use a table with a row, inside have two inline fields as two columns.

<form class="example-form">
  <table class="example-full-width" cellspacing="0"><tr>
    <td><mat-form-field class="example-full-width" appearance="fill">
      <mat-label>First name</mat-label>
      <input matInput>
    </mat-form-field></td>
    <td><mat-form-field class="example-full-width" appearance="fill">
      <mat-label>Long Last Name That Will Be Truncated</mat-label>
      <input matInput>
    </mat-form-field></td>
  </tr></table>
</form>

Upvotes: 1

BB1
BB1

Reputation: 63

I did something like this

    <form #form="ngForm">
      <mat-form-field>
        <input matInput placeholder="Name" maxlength="8" minlength="5" required
               #name>
      </mat-form-field>
      <button mat-icon-button type="submit" color="accent" aria-label="Save name">
        <mat-icon>check</mat-icon>
      </button>
    </form>

And added below scss to keep the input field and save button inline

form {
 display: flex;

 mat-form-field {
  width: 80%;
  padding: 5px;
 }

 button {
  width: 25px;
  margin: auto;
 }
}

In my case, I only had one input and a button. If you have multiple form fields group them inside a div and add flex to it and set the width to the child elements similar to what I did above with form and its child elements

Upvotes: 5

Otto Gutierrez
Otto Gutierrez

Reputation: 487

I found the answer to my problem. There are two ways of doing this:

  1. By setting the display via CSS to "inline"
  2. By using Flexbox and creating a container for the two elements that need to be inline

Upvotes: 0

Related Questions