How can I change the width of angular material button?

Question

How can I change the width of angular material button? I am using angular 6.

Got the answer.Must use min-width Duplicate of [https://stackoverflow.com/questions/33148095/is-it-possible-to-make-an-md-button-smaller](https://stackoverflow.com/questions/33148095/is-it-possible-to-make-an-md-button-smaller) — chaucer, Nov 16 '18 at 09:14

devDan · Answer 1 · 2018-11-16T08:52:20.857

31

You could attach a class and manipulate that.

<button mat-raised-button class="my-class">Show</button>

then in the CSS / SASS file

.my-class{
      width: 100px!important;
      min-width: unset!important;
}

This should ensure the attribute is overwritten. BR

edited Nov 16 '18 at 08:52

answered Nov 16 '18 at 08:42

devDan

But the width is not decreasing beyond a certain limit .It is only increasing but the issue is with decreasing. – chaucer Nov 16 '18 at 08:49
Regarding [this suggested edit of yours](https://stackoverflow.com/review/suggested-edits/21430659): please do not try to edit posts which are clearly off-topic. All you added was more reason to close it as being a tool-recommendation, or even Primarily Opinion Based. Another problem is that the first edit on a question after it has been put on hold puts a question into the reopen queue, whereas subsequent edits won't. You therefor take the OP's chance for improving the question. Do keep editing, just make sure they're worth it! – Adriaan Nov 16 '18 at 09:04
2

`min-width` was my problem. Thanks – Gil Epshtain Dec 22 '19 at 12:23
Most welcome :') – devDan Dec 23 '19 at 08:34
1

min-width: unset!important; that was the key ;) – Smaillns Jun 03 '20 at 10:17

score 1 · Answer 2 · edited Nov 16 '18 at 09:11

1

You can write it like this:

<button mat-raised-button>BUTTON</button>

Or in CSS, without !important property:

mat-raised-button {
 width: 50px;
}

edited Nov 16 '18 at 09:11

Adriaan

answered Nov 16 '18 at 09:00

Liviu Nita

score 0 · Answer 3 · answered Nov 16 '18 at 08:45

0

Merely add a style attribute (a way of diverses to do it) :

  <button mat-raised-button color="primary" style="width : 10em;">Primary</button>

answered Nov 16 '18 at 08:45

SeleM

score -4 · Answer 4 · answered Nov 16 '18 at 08:41

-4

Supposing this is your button:

<button id="myButton" mat-button color="primary">Primary</button>

You can go ahead an add id to button:

#myButton {
width: 150px;
}

answered Nov 16 '18 at 08:41

Nitesh Rana

4 Answers4