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.

Dropdown background and text color

Gravity Support Forums » Plugin Support » Gravity Forms

  1. ultramel123
    Member

    Hi

    Where in my css could I change the background and text color of my dropdown fields please? The text is white, and the background (hover) color is white as well and is almost impossible to read.

    Any help would be greatly appreciated :)

    Thank you

    Posted 11 years ago on Monday May 27, 2013 | Permalink

  2. Richard Vav
    Administrator

    Can you post a link to a page containing the form in question, so we can get a look at your themes styles.

    Posted 11 years ago on Monday May 27, 2013 | Permalink

  3. ultramel123
    Member

    Hi Richard.

    Sure.

    http://www.airport-game-lodge.co.za/?page_id=2890

    Thank you

    Posted 11 years ago on Tuesday May 28, 2013 | Permalink

  4. Richard Vav
    Administrator

    It looks like your issue is being caused by a plugin called connections loading a copy of the chosen (enhanced ui) stylesheet on every page regardless of whether it is required or not, this is bad practice by the plugin developers. Add that to the fact that Gravity Forms has it's own styles for the chosen (enhanced ui) bundled in its formsmain.css stylesheet and you get a slightly confused dropdown with a mix of styles being used.

    <link rel='stylesheet' id='connections-chosen-css'  href='http://www.airport-game-lodge.co.za/wp-content/plugins/connections/css/chosen.min.css?ver=0.9.11' type='text/css' media='all' />
    Copy

    The best way to solve this would be if the connections plugin developers fixed their plugin but for the time being you can try adding the following towards the bottom of your theme's stylesheet or wherever you are instructed to place custom css

    .gform_wrapper .chzn-container .chzn-results .highlighted {
color: black !important;
}
    Copy

    Regards,
    Richard

    Posted 11 years ago on Tuesday May 28, 2013 | Permalink

  5. Richard Vav
    Administrator

    I installed a copy of the connections plugin on my localhost and have come up with a way of preventing it from including chosen a second time on pages containing a gravity form with the enhanced ui enabled. If you add the following to your theme's functions.php file you can remove the extra CSS I suggested earlier

    add_action('gform_enqueue_scripts','cleanup_connections',10,2);
function cleanup_connections($form)
{
//stop connections plugin from including chosen again on pages with gravity forms enhanced ui dropdowns
    if (wp_script_is('gforms_chosen',$list='queue')){
        wp_deregister_script('jquery-chosen-min');
        wp_deregister_style('connections-chosen');
    }
    return false;
}
    Copy

    Regards,
    Richard

    Posted 11 years ago on Wednesday May 29, 2013 | Permalink

  6. ultramel123
    Member

    Thank you Richard!! That is working perfectly.
    Thank you so much for your help :)

    The dropdown text is now clearly visible.

    How could I "extend" the size of the dropdown lines? You will see on the form, that for the "menu" dropdown, I have included the details for the menu, and when you open the dropdown, the text seems "squashed".

    Is there a way I could extend the size (height) of the text rows in the dropdown) ?

    Thank you

    Posted 11 years ago on Saturday June 1, 2013 | Permalink

  7. Richard Vav
    Administrator

    It looks like you figured it out by setting the line-height of the .chz-results li to 100% in your theme's stylesheet.

    Posted 11 years ago on Saturday June 1, 2013 | Permalink

This topic has been resolved and has been closed to new replies.