Wordpress Gravity form field lengths for Date are to short as small & to long as medium

Can you provide a code example of the HTML? A link to the page would work too.

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

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,

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?

Just checking...that image is from an actual, published page with the Gravity Form embedded and not from the internal GF preview, right?

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.

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

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

    -----

Some source HTML would be great.

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>

Select allOpen in new window

Try adding this to the end of your theme CSS:

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

Select allOpen 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.

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.

Understand --

   I will try this latter tonight -   Thank you .

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

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.

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.

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

Select allOpen in new window

Gave up --