9

Recently, we upgraded from Angular 5 to Angular 6.

The issue: Bootstrap button styles now have no margin spacing between them.

Bootstrap Version: 3.3.7

For example, if in the html you do something like this.

<div>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-cancel">Cancel</button>
</div>

Before we updated, these buttons would have margin space between each.

Just curious if there is something we can update that would fix this or a global CSS style that can be used.

Arthium
  • 141
  • 1
  • 8
  • 1
    Make sure you have preserve whitespace set to true – user184994 May 22 '18 at 21:54
  • Should we add that to being set in our app level styles.css? Or is this something in bootstrap.css that needs to be looked at? – Arthium May 22 '18 at 22:01
  • No, it's actually a property you can set within the @Component decorator – user184994 May 22 '18 at 22:05
  • 1
    See [this answer](https://stackoverflow.com/a/46619232/1009922). – ConnorsFan May 22 '18 at 22:33
  • We found a solution to the issue above, albeit not exactly what we wanted. In the styles.css we added `.btn { margin: 2px}` This gave us our original spacing size back that we saw before the update. I was not aware that you could reference the same bootstrap class names and overwrite them. However, not a big fan of having to do that in the styles.css. – Arthium May 22 '18 at 22:36
  • BTW, did you upgrade from 4 > 5 or 5 > 6? See title of post and body of post. Just a bit confusing. –  May 22 '18 at 23:27
  • We upgraded from angular 4 to 5 and then about 2 weeks later from 5 to 6. I suspected that the issue happened when upgrading from 4 to 5. However, the issue actually came about during the upgrade from 5 to 6. – Arthium May 23 '18 at 14:48

4 Answers4

13

In my project I was able to restore default white spaces between Bootstrap buttons, by setting preserveWhitespaces to true in main.ts file:

platformBrowserDynamic()
  .bootstrapModule(AppModule, { preserveWhitespaces: true})
  .catch(err => console.log(err));

Found it in this place

daxtersky
  • 410
  • 3
  • 9
4

ConnorsFan's answer link is the answer to our issue.

Angular 6 by default sets the angularCompilerOption: preserveWhitespaces for the application to false.

Arthium
  • 141
  • 1
  • 8
0

To add to the marked answer, this issue is caused by the preserveWhitespaces setting.

what's really happening behind the scenes is your template code, for example

<div>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-cancel">Cancel</button>
</div>

is getting all the whitespace removed. which also removes the line break at the end of each button element. It's the line break that gives that extra space, not margin between each button.

So this shows more clearly why the buttons are sticking together.

<div><button class="btn btn-success">Success</button><button class="btn btn-info">Info</button><button class="btn btn-cancel">Cancel</button></div>

You can apply the fix as suggestion globally or you can resolve the problem on specific components if needed. https://angular.io/api/core/Component You'll notice that in the docs for @components you can provide an option to turn on/off this feature for that component only.

Another solution as suggested in comments would be to globally add marginto all .btn classes, however this would have the reverse side effect happening of the option ever switches again (giving to much margin between buttons instead of the natural space)

Final note, this is an HTML/DOM side effect, not Angular or CSS, you'll be able to replicate this effect with pretty much any inline elements by removing/adding the linebreak/spaces between each element.

Jessy
  • 1,150
  • 16
  • 27
-2

Add the btn-toolbar class to the div to get space margin between the buttons. Like this:

 <div class="btn-toolbar">
  <button class="btn btn-success">Success</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-cancel">Cancel</button>
</div>
Hibisceae
  • 33
  • 2
  • 8