ssougnez ssougnez - 5 months ago 45
CSS Question

AngularJs component and padding

I just created two dummy components in AngularJS 1.5 and I'm having an issue with my CSS. Basically, here is the output HTML:

<app number="5" class="ng-isolate-scope"><div class="app__button___ngX_w">The value is 10</div></app>
<price value="5" class="ng-isolate-scope"><span class="price__button___3-PzM">The price is 5€</span></price>

The two classes defined on the "divs" look like this:

.app__button___ngX_w {
width: 150px;
border-radius: 10px;
padding: 10px;
border:1px solid #3e3e3e;

The second one is the same, except the background color. However, the end result is quite unexpected:

enter image description here

After my investigations, I noticed that if I apply the classes to the surrounding component tag and change its "display" property to "block", it works.

However, I have no idea (and I'm not even sure it's possible) how to modify the class of the surrounding component tag, so my question is, what is the best way to avoid this to happen? Because it's quite a common scenario...


The behavior corresponds to the html specification, since a <span> element is display: inline by default.

So you can achieve the desired result by either changing your css

.price__button___3-PzM {
  display: block;

or by changing the <span> tag to <div>

html fiddle

Regarding component reuse with angular 1.5 you can either:

Rely on your bundler or es6 imports to limit the include the css with your component.

Or you may also imitate ng2.component syntax by defining your styles directly in the template declaration.

.component('price', {
       template: `
           .price__button___uuid {
              background-color: teal;
         <div class='price__button___uuid> Hello </div>

angular fiddle