• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 177
  • Last Modified:

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 --
0
Phonebuff
Asked:
Phonebuff
  • 10
  • 9
  • 2
3 Solutions
 
Morgan FinleyCommented:
Can you provide a code example of the HTML? A link to the page would work too.
0
 
Jason C. LevineNo oneCommented:
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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. LevineNo oneCommented:
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
 
PhonebuffAuthor Commented:
Gave up --
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 10
  • 9
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now