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 --
LVL 15
PhonebuffAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Morgan FinleyCommented:
Can you provide a code example of the HTML? A link to the page would work too.
0
Jason C. LevineDon't talk to me.Commented:
Gravity Forms outputs its own CSS but your theme's CSS may override it.  If you simply right-click on the form field in the browser and select "Inspect Element" you can see which CSS rules are affecting it and therefore which rules need to be changed.
0
Morgan FinleyCommented:
Jason is correct, but I'd still like to see the page and inspect the code myself. The problem with Gravity Forms and CSS is that sometimes just rewriting the rule won't work. I've found before that sometimes you have to put more specificity into the CSS to override the plugin. Usually this is as simple as attaching a parent class or ID to the selector, but not always.
0
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

PhonebuffAuthor Commented:
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
0
PhonebuffAuthor Commented:
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,
0
Morgan FinleyCommented:
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?
0
Jason C. LevineDon't talk to me.Commented:
Just checking...that image is from an actual, published page with the Gravity Form embedded and not from the internal GF preview, right?
0
PhonebuffAuthor Commented:
Yes -  Live page --

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.
0
Morgan FinleyCommented:
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
0
PhonebuffAuthor Commented:
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..  

    -----
0
Morgan FinleyCommented:
Some source HTML would be great.
0
PhonebuffAuthor Commented:
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}


<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>

Open in new window

0
Morgan FinleyCommented:
Try adding this to the end of your theme CSS:

.ginput_container input#input_1_3.datepicker {
width: 50px;
}

Open in new window


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.
0
Morgan FinleyCommented:
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.
0
PhonebuffAuthor Commented:
Understand --

   I will try this latter tonight -   Thank you .
0
PhonebuffAuthor Commented:
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;
}
0
Morgan FinleyCommented:
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.
0
Morgan FinleyCommented:
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.
0
PhonebuffAuthor Commented:
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 ?
.ginput_container input#input_1_3.datepicker {
width: 50px;
}

Open in new window

0
PhonebuffAuthor Commented:
Back looking at this again --
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PhonebuffAuthor Commented:
Gave up --
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.