-2

I have a custom component and I'm using a number of those in the markup of the parent. When I declare a style within the custom component, it performs as expected. However, when I set the style in the parent component selecting each of the custom one, the formatting takes place but doesn't target the custom component - instead it gets a hit outside of it and not in relation of it.

In the Blitzy example, the border can be seen not around the hellows, but outside of them.

I don't understand why it happens, let alone how to resolve it.

DonkeyBanana
  • 3,266
  • 4
  • 26
  • 65
  • 1
    Please add a [mcve] to your question. A link to an off-site example or snippet is insufficient. – TylerH Aug 18 '19 at 01:08
  • 3
    @TommySchmidt An off-site example has never been sufficient. See the yellow banner on this post for more information. A debugging question with no code is useless when the links change or die. – TylerH Aug 18 '19 at 18:26
  • @TylerH i see your point, however i think that we could've just edited the question to fit SO's requirements instead of flagging. that way everyone is happy. anyway, thanks for the fast response ^^ – Tommy Schmidt Aug 18 '19 at 18:32
  • @TommySchmidt That would be nice, but that will usually violate the rights of the license holder (e.g. OP, usually). Content on SO is licensed under CC by-SA 3.0 meaning there are very limited options to have it removed once it's posted here. In fact SO got thoroughly reamed when they tried to change their license to something else because of all the implications for the code posted here and used from here. **tl;dr** that's why we require OP to do it -- it shouldn't be too much effort to ask of them in exchange for free help, and it ensures their code only makes it here if they want it here. – TylerH Aug 18 '19 at 18:41

1 Answers1

0

Your custom components does not set the display css property so it defaults to display: inline. Borders do work kinda strange on inline elements... you can read more about it here: https://stackoverflow.com/a/5700058/6357653

In order to fix your problem you could add display: block to your custom component. Ref: https://stackblitz.com/edit/angular-rbpzwz

Tommy Schmidt
  • 1,224
  • 1
  • 16
  • 30