Angular Components With Default Display Styling Overflow the Container

Ole Ersoy
Dec 2, 2023
Photo by Emma Li

Scenario

You’ve just created a new Angular component and when you place it inside a component with padding your Angular component view overflows the padding over the external container.

Approach

This happens because the default display CSS style value for the Angular component is inline .

Set the display to block or some other display value like flex or grid and this will fix the issue.

Demo

The demo lays out the default Angular Stackblitz component as follows.

<div>
<app-root>Loading...</app-root>
</div>

And if we go into the global style sheet and change display from inline to block we will see that the div container padding takes effect.

--

--