Investigate font-size and spacing issues when a form is embedded

[ryanwoldatwork]

Story

As a site owner,
I want my Touchpoint form to display the same as it does in the preview,
So that I can have consistency and control in site design.

Acceptance

Given a Touchpoint form is embedded on the client site, p.gov,
When I view the touchpoint form on https://federalist-5232e959-9997-4f27-a482-3c19a3c9590f.app.cloud.gov/preview/gsa/interimperformance-dot-gov-2018/dashboard-updates/cx/
Then I see the form and it looks the same as it does in the Preview in Touchpoints (css style wise - minus the explicit customer overrides [like colors and button shapes])

[ryanwoldatwork]

The mis-styled form looks like:

But it should look like:

[ryanwoldatwork]

The smaller fonts seem to be caused by rem CSS treatments for font-sizes and other attributes.

When using rem units, the pixel size they translate to depends on the font size of the root element of the page, i.e. the html element.

When using em units, the pixel value you end up with is a multiplication of the font size on the element being styled.

via https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

[ryanwoldatwork]

Viewable here: https://rd.usda.gov/resources/regulations/program-regulations

[mejiaj]

@ryanwoldatwork is there a way to disable the inline styles? Either by removing them or via a technique like Remove inline styles from CSS-Tricks.

The small font-size 1rem isn't working as you might expect because html has a px font-size of 10px. Meaning 1rem = 10px. If you were to set it to browser default 16, then you might have something like you would expect.

[ryanwoldatwork]

@mejiaj - yes, there is a way to toggle off inline styles in Touchpoints. In that case, the tab and such rely on USWDS styles for proper display. Unfortunately, some sites, like the sample USDA site for this issue, doesn't use USWDS styles either.

🤔