Form label with mandatory asterisk makes the line wrap misaligned...

Forum|Forum|1 year ago
October 23, 2024
3 replies
1506 views

Hi,

Form field label made mandatory (asterisk icon) causes the 3rd line to misalign. First and second line wrap with correct indentation. However, 3rd wrapped line text returns back under the asterisk and not indented like the top 2 lines, and does not look good.

iPhone 13 causes this effect. Through browser tools I have created a new media query for this to target specifically 300px - 359px.

Can you please advise how I can clean this up?

I have tried this:

.mktoLabel.mktoHasWidth {
display: block;
margin: 0;
padding-left: 1em;
text-indent: -1em;
}

I do not see how I can possibly apply any <span> when HTML is not readily available for these form labels.

Please advise.

Thank you.

Marketo

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

SanfordWhiteman

Level 10

It’s not possible to help without a link to your page w/form.

Christine_LeBlaAuthor

Level 4

Screenshot. It's the asterisk on mandatory fields that poses this challenge. How can 3rd line and other subsequent lines get aligned correctly to follow the indentation that first and second line share:

SanfordWhiteman

Level 10

A link to your page is necessary to suggest CSS edits.

Dave_Roberts

Level 10

You should be able to edit the HTML of any label using the native Marketo form editor.

For most fields, you can click the pencil icon next to the Label input at the top of the Properties list (far left). Then click the HTML icon on the toolbar to get at the HTML behind the label.

For "checkboxes" field types, there are two places to edit the HTML for a label. The label above/left of the field (yellow) can be edited in the same way shown above. The label to the right of the input (green) can be edited using the "Values" link: Edit (x) which will pop up a modal window where you can edit the "Display Value" for all the checkboxes. This input will also accept HTML, and you may find it easier to click the "Advanced Editor" in the bottom left to show a text-based GUI when editing HTML in the Display Values.