Phonebuff
asked on
Wordpress Gravity form field lengths for Date are to short as small & to long as medium
Hoping someone here is familiar with the gravity forms plugin for Wordpress.
I created a form and it works great with one small exception the date and phone fields are one character to short as small, and way to large as medium. Does anyone know the syntax to over ride the input size for small in the style sheet and get the right lengths in to these two boxes.
TIA --
I created a form and it works great with one small exception the date and phone fields are one character to short as small, and way to large as medium. Does anyone know the syntax to over ride the input size for small in the style sheet and get the right lengths in to these two boxes.
TIA --
Can you provide a code example of the HTML? A link to the page would work too.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
So you can see in the attached that the date is displayed a 03/05/201! But if I place the cursor there and arrow right then I see the whole date --
The Element inspection (attached) seems to say that the width is overridden.
TIA -
Gravity-Form.PNG
The Element inspection (attached) seems to say that the width is overridden.
TIA -
Gravity-Form.PNG
ASKER
Morgan,
Can't publish the page -- and I was using Gravity to minimize what I needed to do :-) This is a by the way, freebee..
Thanks,
Can't publish the page -- and I was using Gravity to minimize what I needed to do :-) This is a by the way, freebee..
Thanks,
That's no problem, I understand the need for confidentiality... just thought I'd ask. The attached gives me what I needed to know, so thanks.
As I suspected, looks like something is overridden with the !important at the end of the declaration. If you turn off that rule in the inspector does the width appear as you'd like it to?
If it doesn't, copy the selector for that CSS rule and put a parent class or ID at the beginning. This will override the !important because the rule will have greater specificity than the rule with the !important in it.
Does that make sense?
As I suspected, looks like something is overridden with the !important at the end of the declaration. If you turn off that rule in the inspector does the width appear as you'd like it to?
If it doesn't, copy the selector for that CSS rule and put a parent class or ID at the beginning. This will override the !important because the rule will have greater specificity than the rule with the !important in it.
Does that make sense?
Just checking...that image is from an actual, published page with the Gravity Form embedded and not from the internal GF preview, right?
ASKER
Yes - Live page --
Clear as mud. Not at all sure what I need to do, but I assume something needs to go in the Appearance -> Custom CSS box.
As I suspected, looks like something is overridden with the !important at the end of the declaration. If you turn off that rule in the inspector does the width appear as you'd like it to?
If it doesn't, copy the selector for that CSS rule and put a parent class or ID at the beginning. This will override the !important because the rule will have greater specificity than the rule with the !important in it.
Clear as mud. Not at all sure what I need to do, but I assume something needs to go in the Appearance -> Custom CSS box.
You will have to add some CSS to the Appearance -> Custom CSS. To start, I'd copy the selector from that rule in the inspector. Then you can add to the beginning of the selector:
#gform_fields_1
Or you can use any other parent class or ID-- meaning the ID or class of a parent element, like the column div for example. It's hard to say what would work the best without seeing the code.
If confidentiality is an issue, you can post a link in a message to me ( check my profile for the messaging button ) and no one will see it but me
#gform_fields_1
Or you can use any other parent class or ID-- meaning the ID or class of a parent element, like the column div for example. It's hard to say what would work the best without seeing the code.
If confidentiality is an issue, you can post a link in a message to me ( check my profile for the messaging button ) and no one will see it but me
ASKER
Okay, that sort of makes sense -
I can give you a link but will also have to setup a user_id and password an that can't happen this evening, since this is generated code, what is it you would like to see, I can show source and copy some code..
-----
I can give you a link but will also have to setup a user_id and password an that can't happen this evening, since this is generated code, what is it you would like to see, I can show source and copy some code..
-----
Some source HTML would be great.
ASKER
So I think I pulled the generated code correctly,
For this field --
Under General the Data Input Type => Date Picker
Data Format => mm/dd/yyyy
Under advanced the Default_value => {date_mdy}
For this field --
Under General the Data Input Type => Date Picker
Data Format => mm/dd/yyyy
Under advanced the Default_value => {date_mdy}
<div class='ginput_container'>
<input name='input_3' id='input_1_3' type='text' value='03/05/2015' class='datepicker medium mdy datepicker_with_icon' tabindex='2' />
</div>
<input type='hidden' id='gforms_calendar_icon_input_1_3' class='gform_hidden' value='http://dispatch.dapage.net/wp-content/plugins/gravityforms/images/calendar.png'/></li><li id='field_1_4' class='gfield field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_4_1' >Time</label><div class='clear-multi'>
<div class='gfield_time_hour ginput_container' id='input_1_4'>
<input type='text' maxlength='2' name='input_4[]' id='input_1_4_1' value='22' tabindex='3' /> <i>:</i>
<label for='input_1_4_1' >HH</label>
</div>
<div class='gfield_time_minute ginput_container'>
<input type='text' maxlength='2' name='input_4[]' id='input_1_4_2' value='25' tabindex='4' />
<label for='input_1_4_2' >MM</label>
</div>
Try adding this to the end of your theme CSS:
You can change the width to whatever you like or need. I think this should work, if not then I'll need more access to dig into your code.
.ginput_container input#input_1_3.datepicker {
width: 50px;
}
You can change the width to whatever you like or need. I think this should work, if not then I'll need more access to dig into your code.
When I said "more access" I mean a link to the page with the form on it. I don't need access to your back-end.
ASKER
Understand --
I will try this latter tonight - Thank you .
I will try this latter tonight - Thank you .
ASKER
No joy --
Pasted this into the end of the CSS based on something I got from Gravity --
#top .gform_wrapper .gfield_time_hour input,
#top .gform_wrapper .gfield_time_minute input,
#top .gform_wrapper .gfield_date_month input,
#top .gform_wrapper .gfield_date_day input,
#top .gform_wrapper .gfield_date_year input {
width: 85% !important;
}
#TOP .gform_wrapper .datepicker {
width: 10.0em !important;
}
Pasted this into the end of the CSS based on something I got from Gravity --
#top .gform_wrapper .gfield_time_hour input,
#top .gform_wrapper .gfield_time_minute input,
#top .gform_wrapper .gfield_date_month input,
#top .gform_wrapper .gfield_date_day input,
#top .gform_wrapper .gfield_date_year input {
width: 85% !important;
}
#TOP .gform_wrapper .datepicker {
width: 10.0em !important;
}
Did you try the code I provided? I believe the code in your comment is just the CSS output by the plugin, which we're trying to override.
A link to the page would be a big help so we can look at the HTML and CSS. No backend access necessary, just want to view the form on a page.
A link to the page would be a big help so we can look at the HTML and CSS. No backend access necessary, just want to view the form on a page.
I hope that didn't sound rude. It's just that it would be WAY easier to solve your problem if we can look at an actual page.
ASKER
Yes,
Actually that was what I tried first ! Sorry forgot to put that in the update --
In both cases there appeared to be no affect on the page, an yes I did clear the cache :-)
I am adding this to the bottom of the .CSS for the Child Template I am using, that is the right place ?
Actually that was what I tried first ! Sorry forgot to put that in the update --
In both cases there appeared to be no affect on the page, an yes I did clear the cache :-)
I am adding this to the bottom of the .CSS for the Child Template I am using, that is the right place ?
.ginput_container input#input_1_3.datepicker {
width: 50px;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Gave up --