https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive Gravity Support Forums Topic: Drop Down Fields Not Responsive en-US Tue, 14 Apr 2026 23:52:24 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-376181 Sun, 24 Aug 2014 16:24:40 +0000 Richard Vav 376181@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-282922 Tue, 28 May 2013 06:45:03 +0000 Richard Vav 282922@https://legacy.forums.gravityhelp.com/ <p>For anyone who wants to see the responsive enhnaced dropdowns in action I have set a demo up @ <a href="http://gravity.wawrzyniak.me/enhanced-uichosen-2/" rel="nofollow">http://gravity.wawrzyniak.me/enhanced-uichosen-2/</a><br /> 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 @ <a href="http://gravity.wawrzyniak.me/enhanced-uichosen/" rel="nofollow">http://gravity.wawrzyniak.me/enhanced-uichosen/</a> </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-276254 Sat, 25 May 2013 11:59:20 +0000 Richard Vav 276254@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p><a href="https://raw.github.com/harvesthq/chosen/v0.9.14/chosen/chosen.jquery.min.js" rel="nofollow">https://raw.github.com/harvesthq/chosen/v0.9.14/chosen/chosen.jquery.min.js</a></p> <p>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.<br /> <pre><code>add_action(&#39;gform_enqueue_scripts&#39;,&#39;update_chosen&#39;,10,2); function update_chosen($form) { if(wp_script_is(&#39;gforms_chosen&#39;,$list=&#39;queue&#39;)){ wp_deregister_script(&#39;gforms_chosen&#39;); wp_enqueue_script(&#39;chosen-script&#39;,get_template_directory_uri().&#39;/js/chosen.jquery.min.js&#39;,array(&#39;jquery&#39;),&#39;0.9.14&#39;,true); } return false; }</code></pre> <p>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<br /> <pre><code>add_action(&#39;gform_pre_render&#39;,&#39;set_chosen_width&#39;); function set_chosen_width($form){ if(wp_script_is(&#39;chosen-script&#39;,$list=&#39;queue&#39;)){ ?&gt; &lt;script&gt; gform.addFilter(&#39;gform_chosen_options&#39;,&#39;set_chosen_options_js&#39;); function set_chosen_options_js(options,element){ options.width = &#39;100%&#39;; return options; } &lt;/script&gt; &lt;?php } return $form; }</code></pre> <p>Next you will need to add some <a href="http://pastie.org/7958112" rel="nofollow">extra CSS</a> to your theme's style.css file or wherever you are instructed to place custom CSS.</p> <p>And that's it, go check your page, you may need to clear your cache. </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-273745 Fri, 24 May 2013 14:53:48 +0000 vegaskev 273745@https://legacy.forums.gravityhelp.com/ <p>Thanks.....I appreciate your help folks. </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-260197 Sat, 18 May 2013 16:33:08 +0000 Richard Vav 260197@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin,</p> <p>You're welcome, I am glad to be able to help and offer members of the community assistance when I can.</p> <p>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 <a href="http://i.imgur.com/c288HQk.jpg" rel="nofollow">http://i.imgur.com/c288HQk.jpg</a> </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-260096 Sat, 18 May 2013 14:56:45 +0000 Kevin Flahaut 260096@https://legacy.forums.gravityhelp.com/ <p>@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. </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-257706 Fri, 17 May 2013 09:59:20 +0000 Richard Vav 257706@https://legacy.forums.gravityhelp.com/ <p>The chosen.js developers have been working on this recently and have added support for percentage based widths to version 0.9.13</p> <p><a href="https://github.com/harvesthq/chosen/pull/1141" rel="nofollow">https://github.com/harvesthq/chosen/pull/1141</a></p> <p>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 <a href="http://pastie.org/7920859" rel="nofollow">http://pastie.org/7920859</a> to your functions file to use a percentage width instead of the default fixed pixel width. </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-257653 Fri, 17 May 2013 09:28:15 +0000 Kevin Flahaut 257653@https://legacy.forums.gravityhelp.com/ <p>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? </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-255885 Thu, 16 May 2013 14:30:49 +0000 vegaskev 255885@https://legacy.forums.gravityhelp.com/ <p>Hey Kev, Thanks for getting back to me. I appreciate it.</p> <p>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.</p> <p><a href="http://restrainc.com/property/demo-property/" rel="nofollow">http://restrainc.com/property/demo-property/</a></p> <p>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.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/drop-down-fields-not-responsive#post-255463 Thu, 16 May 2013 08:58:06 +0000 Kevin Flahaut 255463@https://legacy.forums.gravityhelp.com/ <p>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? </p>