SOLVED

Asterisk Placement

Go to solution
Anonymous
Not applicable

Asterisk Placement

Hi,


I'm trying to move the placement of an Asterisk to be after a field instead of before it. Does anyone have any css code for this?

I tried using the below code which I found in this thread:

Change the placement of the required field asterisk?

.mktoRequiredField .mktoAsterix:after {

  content:" *";

}

Unfortunately all it did is add a second asterisk directly next to the one's already there to the left of the field

1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Asterisk Placement

This worked for me:

.mktoForm .mktoAsterix {position: absolute; right: -11px;}

View solution in original post

8 REPLIES 8
Grégoire_Miche2
Level 10

Re: Asterisk Placement

Try something such as :

.mktoRequiredField .mktoAsterix {

  float:right;

   text-align : left;

}

Anonymous
Not applicable

Re: Asterisk Placement

Tried it, but it didn't work.....

SanfordWhiteman
Level 10 - Community Moderator

Re: Asterisk Placement

Unless you are using a destyled form, I would leave the existing asterisk in place because it affects layout in subtle ways.  Instead, just hide it and make a copy on the other side: MktoForms2 :: Asterisk on Right​.

Anonymous
Not applicable

Re: Asterisk Placement

Thanks. the request unfortunately has since changed. I've seen you answering some css questions on other threads. Do you know how to place the asterisk directly to the right of each field?

I've currently got it to look like this using: .mktoForm .mktoAsterix {position: relative; left: -22px;}

Form 1.png

But I'm trying to get it to look like this: with the Asterisk next to each individual field:

form 2.png

Justin_Cooperm2
Level 10

Re: Asterisk Placement

You can do that directly in the Form Editor itself.

Go in and click on a label. On the right pane it will say Label Width and Field Width. Make the Label Width as small as possible for each field so that the asterisk is right next to the label. It's easier then if you want to change how far away the text boxes are...

Anonymous
Not applicable

Re: Asterisk Placement

Yeah I suppose you could do that: but then your fields will move too. This would leave you with a set of fields that are not in line.

Anonymous
Not applicable

Re: Asterisk Placement

This worked for me:

.mktoForm .mktoAsterix {position: absolute; right: -11px;}

Justin_Cooperm2
Level 10

Re: Asterisk Placement

That probably won't look good on different devices. Absolute positioning is not generally the best way to implement things.