How to hide form sub labels with CSS

ezchoicefinancial

Asked on 12. kesäkuuta 2015 klo 15.38

Hi there i am having a bunch of issues with my form that i need help with.

The form in question is form id 51376919239971

1- The first issue is .form-sub-label under the phone number. I don't want that to be there at all. it has a minimum height of 13px and margin-top 1 px. i tried manny different css commands and nothing worked. i won't list them all but here is the last one :

.form-sub-label { font-size: 0.1em; margin-top: 0px!important; min-height: 1px!important; display:none; }

it looks funny on the form because there is too much space between the phone number field and source field

2- I want the "form input" width of Phone number, Source, and Reason to be the same width as Name, Email, And Zipcode in both DESKTOP and Mobile. I looks funny on desktop and mobile in my opinion how the width doesn't match. Essentially i want the Phone number, Source, and Reason to match the width

of Name, Email, And Zipcode in both desktop and mobile . see image below

3- The drop down arrow for "Source and Reason" Does not show on my mobile phone using safari and chrome. Maybe cause they are not wide enough ( i made them wider though and they still dont show) . so please i need the drop down arrow to show. see image below:

4- Form html has too much space around it. in other words the space between the form html and reason as submit is too much, is there a way to decrease it . see image below

4- Is there a way to make the zip-code code field only populate the numeric keys on mobile phones just like the telephone field does ?
Mike

Replied on 12. kesäkuuta 2015 klo 17.26

There is a CSS error caused by missing closing curly brace on injected CSS.

You can add it to fix the error.

Then, hide the sub label with the next CSS:

.form-sub-label {
display: none;
}

Other questions have been moved into separate threads, so we will be able to address them properly.
ezchoicefinancial

Replied on 12. kesäkuuta 2015 klo 17.41

i cant seem to fix the curly brace no matter what i do
ezchoicefinancial

Replied on 12. kesäkuuta 2015 klo 17.46

i added the extra curly brace in the end and now my form is super narrow. what should i do to make it look like before
Mike

Replied on 12. kesäkuuta 2015 klo 17.46

The issue seems to be fixed. However, added sub label CSS is currently within @media mobile CSS rule. So you might consider moving it, or adding an additional CSS rule for desktop version.

Thank you.
ezchoicefinancial

Replied on 12. kesäkuuta 2015 klo 17.50

good catch but i have no idea how to do so . i thought i moved above the media scope thingy but that didnt change anything. Now even my font is gone. what a mess.

i should have not asked for help. now my form is all messed up. the background is not transparent anymore and there is too much padding in top and bottom

i think i fixed by using the old code. the design css kind of sucks. i still need to know about my other questions. where threads opened for those?
raul

Replied on 12. kesäkuuta 2015 klo 18.27

We're sorry to hear that your form is all messed up.
You can always use your form's revision history to revert unwanted changes in your form.

Regarding your threads, I found 3 recent besides this one. You can find the links below:

http://www.jotform.com/answers/587658-Drop-Down-arrows-are-missing-on-mobile-form#1
http://www.jotform.com/answers/587660-How-to-decrease-white-space-around-Text-html-field-using-CSS#1
http://www.jotform.com/answers/587657-How-to-set-fields-to-the-same-strict-width#1
ezchoicefinancial

Replied on 15. kesäkuuta 2015 klo 14.03

item 4 was never addressed

4- Is there a way to make the zip-code code field only populate the numeric keys on mobile phones just like the telephone field does ?

Page URL:
Mike

Replied on 15. kesäkuuta 2015 klo 14.26

The 4th question has been moved into a separate thread:

http://www.jotform.com/answers/589063

We will update it as soon as possible.