Skip to content

material-buttons does not have default space between them in v6.0 as they have in v5.0 #11397

New issue

Have a question about this project? No Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “No Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? No Sign in to your account

Closed
sandeeppatidar30 opened this issue May 18, 2018 · 5 comments

Comments

@sandeeppatidar30
Copy link

Bug

What is the expected behavior?

It should have space between them as they have in v5.0

What is the current behavior?

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

@pfeigl
Copy link
Contributor

pfeigl commented May 19, 2018

This has nothing to do with the buttons of angular material. The difference is, that Angular 6 changed preserveWhitespaces to false in the default.

This changes your generated HTML from something like this <button></button> <button></button> to <button></button><button></button> (observe the missing whitespace here)

For details read the Angular changelog found here: https://github.com/angular/angular/blob/master/CHANGELOG.md, specifically this point:

@Spawnrad
Copy link

Spawnrad commented May 23, 2018

Yes it looks like we need to add :
@component({preserveWhitespaces: true}) to have the space between buttons now.

https://stackblitz.com/edit/angular-material2-issue-urtyjg

@josephperrott
Copy link
Member

Closing as this is likely the result of preserveWhitespaces

@tonysamperi
Copy link

The problem for me is that I also created a css rule to add margin.
Of course it gets overridden by default material styling (yes, my rules are loaded after the material theme, but still).
I had to wrap all buttons in divs. Horrible.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
No Sign up for free to subscribe to this conversation on GitHub. Already have an account? No Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants