Form : How to add sub-label using css?

AgilityAssoc.Canada

Asked on May 7, 2018 at 12:24 PM

Hi,

On form 81264019972965, I have a date widget field that has no option for a sub-label.

i'm trying to add one using injected css but I don't have it right to make it work;

#cid_33 label.form-sub-label:before

{content: "Estimate if Unknown"; }

Perhaps this should be custom css instead?

Regards, Robert
AgilityAssoc.Canada

Replied on May 7, 2018 at 12:49 PM

I tried these custom CSS codes for the date widget with no success.

Robert.... trying...

.form-sub-label::after

{content: "Estimate if Unknown";}

.datepicker .form-sub-label::after

{content:"Estimate if Unknown";}

.ui-datepicker .ui-widget .ui-widget-content .form-sub-label::after

{content:"Estimate if Unknown";}

Richie JotForm Support

Replied on May 7, 2018 at 1:34 PM

You can add the sub-label in the Form Designer CSS. Kindly try these css code.

#cid_33:after{
   content: "This is a sub-label";

    display: block;

    margin-top: -10px;
}

Form : How to add sub label using css? Image 1 Screenshot 30

Sample output :

Form : How to add sub label using css? Image 2 Screenshot 41

Let us know how it goes.

Thank you.

AgilityAssoc.Canada

Replied on May 8, 2018 at 11:06 AM

Hello,

Yes thank you, that worked perfectly. After some thought I decided to use the Birthday widget instead. I did not require the sub-label.

Although, for future reference, I would like to know how to center the the input text for #cid_33. I tried using; #input_33{text-align:center;}, but that didn't appear work. I'm thing this likely requires widget custom css code.

Thank you for the help and best regards, Robert

Brody_S

Replied on May 8, 2018 at 11:15 AM

Hello Robert,

To use the example my colleague has supplied:

#cid_32:after {

content: "This is a sub-label";

margin: -10px;

display: block;

}

For this sub-label to be centered you need to apply this CSS:

#cid_32 {

text-align: center;

}

Please let us know if we can provide any futher assistance with this, or any other matter!

AgilityAssoc.Canada

Replied on May 12, 2018 at 10:11 PM

Robert

David JotForm Support Manager

Replied on May 12, 2018 at 11:01 PM

If you want to center the text that is inputted into that field, you can inject this code:

#input_32{

text-align: center !important;

}

Result:

1526180430centered 001 Screenshot 10

AgilityAssoc.Canada

Replied on May 14, 2018 at 9:39 AM

OK, I didn't use !IMPORTANT, that is important to remember. TNX Robert

AgilityAssoc.Canada

Replied on May 14, 2018 at 9:42 AM

error

Richie JotForm Support

Replied on May 14, 2018 at 9:54 AM

Hi, Robert.

Can you give us more information on what error has occurred in your form?

Thank you.