Document Library and list item Views not working with SPFx Extension.

[EnmanuelParedesR]

trafficstars

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: 105.0.5195.102
• SPFx version: 1.15
• Node.js version: v16.14.0
• etc

Describe the bug / error

I'm having issues with the document libraries and List Views in SP Online after deploying my Application Extension (React). It's the list's title and some elements with fixed top distance.

as you may see, this is where the list's title has to be. If a remove some margin directly in the element:

I tried to target the element via CSS but because of the hashing is too hard to select the element and change the value.

Steps to reproduce

1. Create an SPFx Extension with some height tlike 60px
2. Go to document Library or ListView Allitem.aspx page

Expected behavior

As in the second picture, is expected that the title does not disappear when using the extension

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@EnmanuelParedesR are you using top and bottom placeholders to display the customizer?

Seems like your custom DOM or CSS is affecting the rendering.

It is not happening when placeholders are used and the CSS is not modified globally:

[EnmanuelParedesR]

Hello AJIXuMuK, I'm using both placeholders. my CSS is not overriding the SharePoint css, as far as I can see.

I'm using tailwind and also hashing my classes.

here's a look of the placeholder inject

Its the same for the footer and header. Maybe is because of the height? try to increase the height on your sandbox component

[EnmanuelParedesR]

Hello, any idea about this?