I can't believe I (nor anyone else) has noticed this, but drop-down fields in latest GForms (1.7.2) are not responsive. All the other fields that I have in my forms are...just not the drop-downs.
Any idea when the GF team will make the drop-down fields responsive?
Thanks in advance.
Strange. As far as I'm aware nothing changed in 1.7.2 that should affect that. Can you post a URL to your form page so we can take a look?
Hey Kev, Thanks for getting back to me. I appreciate it.
Absolutely, see link below. The area that the forms are in will be private within the next few days, so if you don't get around to it until they're hidden, please email me and I'll get you login creds so you can take a look.
http://restrainc.com/property/demo-property/
I was just about to go in and modify the css for my cpt and then do my media queries to make my cpt posts responsive, when I noticed that the form drop-down wasn't responsive.
I then went on and check about 5 or 6 forms on the site and that's when I noticed that the drop-down fields are not responsive....at least not for me. All of the other GF fields work perfectly, just not those Kev.
Okay, so you're using the "chosen" advanced option.. I'l see what I can find out. Do you have the same problem using the standard select/drop down control?
Richard Vav
Administrator
The chosen.js developers have been working on this recently and have added support for percentage based widths to version 0.9.13
https://github.com/harvesthq/chosen/pull/1141
Edit: Gravity Forms 1.7.3 includes version 0.9.8 once chosen version 0.9.13+ is merged into a future Gravity update I believe you would add this http://pastie.org/7920859 to your functions file to use a percentage width instead of the default fixed pixel width.
@richardvav - thanks for the very thorough follow up. I assumed there must be a fix or a workaround for the chosen script but didn't get a chance to really research it yet. We all really appreciate you taking your time to help the community members here.
Richard Vav
Administrator
Hi Kevin,
You're welcome, I am glad to be able to help and offer members of the community assistance when I can.
I have updated the version of chosen on a clean localhost instalation to test this out and it looks like when you eventually update the script you will also have to make a number of changes to the CSS, currently on page load the dropdowns are open at a fixed width and will not close, the good news is that the select does re-size http://i.imgur.com/c288HQk.jpg
Richard Vav
Administrator
OK so I have found a way for you to implement this today, first you will need to save the following file to your theme folder, the function below presumes you saved it to a folder named js inside your theme folder.
https://raw.github.com/harvesthq/chosen/v0.9.14/chosen/chosen.jquery.min.js
Next step is to copy the following function into your theme's functions file, it will check if the gravity forms chosen script has been enqueued for printing on a page and if so it will de-register it and then enqueue the updated script from your theme folder.
add_action('gform_enqueue_scripts','update_chosen',10,2);
function update_chosen($form)
{
if(wp_script_is('gforms_chosen',$list='queue')){
wp_deregister_script('gforms_chosen');
wp_enqueue_script('chosen-script',get_template_directory_uri().'/js/chosen.jquery.min.js',array('jquery'),'0.9.14',true);
}
return false;
}Now while still in your functions.php file add the following to set the width to 100% rather than a fixed width, this will be outputted to all forms
add_action('gform_pre_render','set_chosen_width');
function set_chosen_width($form){
if(wp_script_is('chosen-script',$list='queue')){
?>
<script>
gform.addFilter('gform_chosen_options','set_chosen_options_js');
function set_chosen_options_js(options,element){
options.width = '100%';
return options;
}
</script>
<?php
}
return $form;
}Next you will need to add some extra CSS to your theme's style.css file or wherever you are instructed to place custom CSS.
And that's it, go check your page, you may need to clear your cache.
Richard Vav
Administrator
For anyone who wants to see the responsive enhnaced dropdowns in action I have set a demo up @ http://gravity.wawrzyniak.me/enhanced-uichosen-2/
there is also a second demo with takes it a step further and completely removes the gravity enhanced ui styles and replaces them with a cdn copy of the chosen css @ http://gravity.wawrzyniak.me/enhanced-uichosen/
Richard Vav
Administrator
The chosen.js script and styles for the enhanced ui were updated to version 1.1.0 in Gravity Forms 1.8.11.3 so manually loading the newer version is no longer required.