PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Drop Down Fields Not Responsive

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

    Posted 5 years ago on Thursday May 16, 2013 | Permalink
  2. 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?

    Posted 5 years ago on Thursday May 16, 2013 | Permalink
  3. 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.

    Posted 5 years ago on Thursday May 16, 2013 | Permalink
  4. 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?

    Posted 5 years ago on Friday May 17, 2013 | Permalink
  5. 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.

    Posted 5 years ago on Friday May 17, 2013 | Permalink
  6. @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.

    Posted 5 years ago on Saturday May 18, 2013 | Permalink
  7. 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

    Posted 5 years ago on Saturday May 18, 2013 | Permalink
  8. Thanks.....I appreciate your help folks.

    Posted 5 years ago on Friday May 24, 2013 | Permalink
  9. 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.

    Posted 5 years ago on Saturday May 25, 2013 | Permalink
  10. 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/

    Posted 5 years ago on Tuesday May 28, 2013 | Permalink
  11. 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.

    Posted 4 years ago on Sunday August 24, 2014 | Permalink