Radio buttons overlaps question text
Closed this issue · 5 comments
FYI, this is affecting our live survey on OPM.gov
I can't tell what's causing this issue, but it looks like adding clear: both; to .question-options should resolve this.
**Update: Looks like theres a float on USWDS .usa-legend coming from our stylesheet that isn't cleared and is leaking into the survey
Hi @jhutchison-opm,
I'm closing this issue, because this was related to existing website styles conflicting, and we have discussed this elsewhere.
Fair enough. Although, it may be worth looking into a way to encapsulate the styles of Touchpoints so that they can't be (easily/accidentally?) overwritten by the host site. Especially since, I suspect, there will often be a collision of class names.
Hi @jhutchison-opm - good thought.
Touchpoints uses USDWS 2.10.x styles for the embed, and those styles are namespaced within the form.
Here's some more info on that - https://github.com/GSA/touchpoints/wiki/Form-Markup.
If there are any outstanding issues, I'd be happy to work with you on specifics.
Right, but because the elements are actually added to the page, any styles that aren't specifically overwritten, or are higher specificity than the Touchpoints styles, leak into the form. And most of the elements of the form don't use the namespace to display the styles, they're just using the USWDS class names. The problem is that it's difficult to debug given that you'd need to verify that Touchpoints is working correctly on every page its embedded on.
Currently on the OPM.gov homepage, for example, you can scroll up within the survey causing the form to be half hidden. Again, this appears to be because styles from the OPM site are leaking into the form styles. To be fair, I'd argue that styling elements like in the screenshot isn't great CSS hygiene, but I suspect the level of effort to debug and fix issues like that in legacy codebases would be fairly high.
That said, I suspect the only real way to prevent this from happening would be to use an iframe or have some sort of high specificity CSS reset.
And ditto, I'm always happy to chat!