CMS Development

douglaswelcome
Teilnehmer/-in

CSS Leak Bug on Rich Text 🐛🐛🐛🐛🐛

lösung

CSS is leakin like a sieve. I am targeting 

<button>

with my css (using ::before and ::after), but it is leaking out all over the place in rich text editors. Probably happening elsewhere but this is the first place I've seen it.

 

here's my button:

image (2).png

 

But now all the menus in rich text editors are getting styled:

image (5).pngimage (4).pngimage (3).png

0 Upvotes
1 Akzeptierte Lösung
Siyabonga
Lösung
Mitglied

CSS Leak Bug on Rich Text 🐛🐛🐛🐛🐛

lösung

It looks like the problem here might be that in your css you have targeted button tag which will style all button tags, you need to make sure your style is targeting that one specific element.

Lösung in ursprünglichem Beitrag anzeigen

5 Antworten
douglaswelcome
Teilnehmer/-in

CSS Leak Bug on Rich Text 🐛🐛🐛🐛🐛

lösung

I understand why its happening...just opening up the discussion as to whether it should...

0 Upvotes
Adesignl
Stratege/Strategin | Partner
Stratege/Strategin | Partner

CSS Leak Bug on Rich Text 🐛🐛🐛🐛🐛

lösung

I would say as a general rule you shouldnt style elements only. Well in most cases. 

 

add a class or use a parent selector at least. 

 

That being said hubspots styling should be pretty bullet proof, This happens when people style the button element directly iunstead of only styling the hs-button class instead. 

 

And no it shouldnt.

Adesignl
Stratege/Strategin | Partner
Stratege/Strategin | Partner

CSS Leak Bug on Rich Text 🐛🐛🐛🐛🐛

lösung

Do you still need help with this?

0 Upvotes
Siyabonga
Lösung
Mitglied

CSS Leak Bug on Rich Text 🐛🐛🐛🐛🐛

lösung

It looks like the problem here might be that in your css you have targeted button tag which will style all button tags, you need to make sure your style is targeting that one specific element.

bronson
HubSpot Employee
HubSpot Employee

CSS Leak Bug on Rich Text 🐛🐛🐛🐛🐛

lösung

The inline editing captabilities within the hubspot CMS rely on the hubspot rich text UI rendering in the same frame as the website content itself.


A good read on best practices to ensure your code works well inside the editor can be found here https://designers.hubspot.com/how-to-make-custom-code-work-with-cms

0 Upvotes