Form layout issues | Community
Skip to main content
K
KaitlynNelson1
Level 3
March 30, 2023
Solved

Form layout issues

  • March 30, 2023
  • 1 reply
  • 3599 views

Was wondering if anyone has any insight as to why a field on a form is creating styling issues. I cloned a form and when I replace one field with a different value, the layout got skewed. It's a required field, but for some reason they're two asterisks by the field and I can't see why (see screenshot)

 

We have custom head HTML in the meta and js footer script on the landing page to help with the form styling in general and it usually does the trick . Wondering if it's the page or if the form is the issue. 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

You‘re hiding the native asterisk container and adding your own via a pseudo-element:

.mktoRequiredField label:after { content:"*"; margin-left:2px } .mktoAsterix { display:none!important }

 

You probably meant to have that only apply to non-empty labels:

.mktoRequiredField label:not(:empty)::after {

 

1 reply

SanfordWhiteman
SanfordWhiteman
Level 10
March 30, 2023
We'd need to see the actual page.
K
KaitlynNelson1Author
Level 3
March 30, 2023
SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
March 31, 2023

You‘re hiding the native asterisk container and adding your own via a pseudo-element:

.mktoRequiredField label:after { content:"*"; margin-left:2px } .mktoAsterix { display:none!important }

 

You probably meant to have that only apply to non-empty labels:

.mktoRequiredField label:not(:empty)::after {

 

Terms & ConditionsAccessibility statement

Loading footer...