Dropdown list fields

22 May 2011 23:00 - 14 Feb 2014 11:53 #1 by Demis [Fox-Labs]
Dropdown list fields was created by Demis [Fox-Labs]
Dropdown list fields setup tip

Filling out dropdown list "Items", remember to separate them with a comma (,).
option #1,option #2,option #3
Spaces within are not a problem until items are separated by a comma.
Many people believe that typing items "one per line", separated by a carriage return would be more intuitive.
Personally I agree, but currently this won't work, so use commas.

Change the font color of dropdown items

The font color and the layout in general are controlled by stylesheets.
Usually Fox Contact doesn't change the font color, therefore when the font color blends with the background and is hard to read, you should find the cause in the stylesheet of your template, which is actually using a font color which doesn't contrast enough with the background color.

If you are familiar with stylesheets you should easily find in your template the statement which controls the color of the font.
Otherwise you can blindly assign a new color to the dropdown items by editing the file media/com_foxcontact/css/chosen.css at line 282 adding the color statement as follows:

div#foxcontainer<?php echo $uid ?> .chzn-container .chzn-results li
display: none;
line-height: 80%;
padding: 7px 7px 8px;
margin: 0;
list-style: none;
background: none;
color: #505050;

Use "Please select..." instead of an empty item as first item

When the form layout in use is "Labels Beside Fields", then the first item of the dropdown fields is empty by default. A blank item gives a good idea of "No item selected".

Once the user has selected an item, a "X" appears on the right side of the control (on the left side for RTL forms). By clicking the "X", the user resets the selection.

Some people prefer a custom text such as "Please select one item...", as default item.
Personally, I don't like it. I find it as unnecessary as the text "Please input a value..." inside an input text field.
However, if you really desire it, and you are prepared for the consequences explained later, then edit the file components/com_foxcontact/helpers/fieldsbuilder.php and search for the following code:
// Insert an empty option
$result .= '<option value=""></option>';

there add your custom text
// Insert an empty option
$result .= '<option value="">Please select...</option>';

This is how the dropdown appears by default.

  • This hack doesn't apply to multilingual forms.
  • It's not easy to distinguish at first glance between the first item, which actually means "No selections" and the real items (see image below). If the user changes his mind and he wants to clear the selection, he may not understand that he has to explicitly select the "Please select..." item, which may be a little non-intuitive.
  • Say goodbye to the "X" button.

The following user(s) said Thank You: Thanasis Mats

Please Log in or Create an account to join the conversation.