Angular Material multiple "input" on same row

Question

How can I add multiple inputs on same row? I have tried using bootstrap but for some reason it wont work. If you have some exemple to show me.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="First Name">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Last Name">
  </mat-form-field>
</form>

I smell a rat in your CSS (example-full-width)! I just tried your example in my code and I saw both on the same line. Also, you could always have these components in a table with one row and two columns. — mohsenmadi
– mohsenmadi, Commented Apr 24, 2018 at 12:35

P.S. · Accepted Answer · 2018-04-24 11:20:39Z

15

Angular Material's inputs are displaying in row by default (see stackblitz below), and may be you override this behavior somewhere in your project, I mean CSS rules. If you like Flexbox, you can use @angular/flex-layout, you can easily control how to display items: in row or in column, and this package is very common among Angular developers. Here is a simple demo with "default" behavior (without any additional rules) and 2 layout options: column and row:

STACKBLITZ

edited Apr 24, 2018 at 11:20

answered Apr 24, 2018 at 11:09

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

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

5 Comments

Rubyen Over a year ago

I don't have any CSS, it's a new projet

P.S. Over a year ago

@Rubyen Do your inputs looks like Material inputs? I mean, do they render properly (except that they are not in row)? And their default animation works?

Rubyen Over a year ago

They look like Material inputs, I have added flex-layout to my project and tried to used it, but it wont put on the same row. I took the code from demo.

P.S. Over a year ago

@Rubyen, tell us, what the problem was)

Rubyen Over a year ago

well it was an css, that I forgot about, it was a width that was put to 100%, but the class was put on the input

Adrita Sharma · Accepted Answer · 2018-11-29 16:23:20Z

4

You are probably looking at the css style display: block; Change whatever you are looking at to display: inline-block;

edit

Now that you showed some code. Your basic html is fine, it shows the inputs next to each other. So something is wrong inside your example-form or example-full-width classes.

edited Nov 29, 2018 at 16:23

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

answered Apr 24, 2018 at 10:49

Carsten

4,22826 silver badges30 bronze badges

1 Comment

Rubyen Over a year ago

I have changed to display:inline-block but it doesn't change

Collectives™ on Stack Overflow

Angular Material multiple "input" on same row

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related