Ionic 4 html is overlapping, css not working on padding

Question

I have a base component which have a header component selector and then ion-router-outlet. I would like to add an any html card on a first page which is Home as my routes. If I place html card on base component then html output seems fine but when I place html card on Home component which will be a child for base, my card renders behind the header or we can say overlap as in the image below: Ionic 4 and Angular 8 is used.

Please, share css of HTMLCard.component.html and see more details. — 1antares1
– 1antares1, Commented Sep 24, 2019 at 21:15

1antares1 · Accepted Answer · 2019-09-24 21:14:04Z

0

It's possible that your HTML card doesn't have in the own selector css some:

display:block;
position:relative;

Or you have position:absolute to HTMLCard.component.html. Remove this!

So that the other components understand that something is above and they can position me immediately below.

Normally that happens when (in this case: home.component.html) does not relatively detect an element rather than respect and place itself below.

Link reference: To avoid components overlapping in angular

answered Sep 24, 2019 at 21:14

1antares1

1,2242 gold badges13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Chokra Over a year ago

Nope it's not working. I've added a class to my htmlCard's root element with given css and checked for any absolute on Header

1antares1 Over a year ago

@AbhishekChokra Could you apply this class in runtime mode from the Developer Tools of the browser? 2 things happen: Either the HTMLCard is in absolute css or the HomeComponent is, but neither of them is being recognized side by side.

Collectives™ on Stack Overflow

Ionic 4 html is overlapping, css not working on padding

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related