Dropdown background and text color « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

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 10 years ago on Monday May 27, 2013 | Permalink
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 10 years ago on Monday May 27, 2013 | Permalink
ultramel123
Member

Hi Richard.

Sure.

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

Thank you

Posted 10 years ago on Tuesday May 28, 2013 | Permalink
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' />
```
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;
}
```
Regards,
Richard
Posted 10 years ago on Tuesday May 28, 2013 | Permalink
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;
}
```
Regards,
Richard
Posted 10 years ago on Wednesday May 29, 2013 | Permalink
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 10 years ago on Saturday June 1, 2013 | Permalink
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 10 years ago on Saturday June 1, 2013 | Permalink

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