How to vertically align label and asterisk in forms

[Anonymous]

If you look at the attached image the the label, asterisk and dropdown are all vertically aligned. This is not true for the input labels.

How can I achieve all 3 elements to be vertically aligned ?

Thanks!

[Stijn_Heijthuij]

Hi Danny,

You can edit the CSS of a form to override the styling given by MKTO. Take a look here; Edit the CSS of a Form Theme - Marketo Docs - Product Docs

Using the added tag !important will override the default styling.

Let me know if you can get that working.

[Anonymous]

Hi Stijn,

Thank you for the quick reply.

I have been adding the custom CSS using the websites stylesheet and have been using !important. If you click on the link below you'll see the form i'm working on and adding the following to the styesheet simply won't work.

.mktoForm .mktoRequiredField label.mktoLabel {

vertical-align: middle !important;

}

Request a Demo

If I could isolate the text label itself maybe I could play with the margins but can't since they are all grouped together.

Any ideas what I can do to have all elements vertically aligned ?

[Stijn_Heijthuij]

Hi Danny,

It might be some fiddling around, but have you tried playing with the margin-top aspect?

[Anonymous]

I have fiddled with it. I have tried top-margin .. but the text label and asterisk are grouped together so they would both be impacted by this.

[Stijn_Heijthuij]

Hi Danny,

Try this:

.mktoForm .mktoAsterix { margin-top:20px; }

I'm just doing it in the browser, but see the desired result.

[Stijn_Heijthuij]

Expanding on that. For the label it's

.mktoForm .mktoLabel { margin-top:20px; }

Changing the label will also move the asterix so fiddle around and find the right values for you.

[Anonymous]

Hi,

The top-margin worked but the values that accomplished the task were:

.mktoForm .mktoLabel { margin-top:-3px !important; }

.mktoForm .mktoAsterix { margin-top:3px !important; }

Thanks for your help

On Tue, Nov 10, 2015 at 6:05 AM, Stijn Heijthuijsen <

[Stijn_Heijthuij]

Happy to help

Make sure you check this across all major browsers