Change the width of a drop down box

Sometimes the options I use in a drop down box are longer than the width of the box so that when the option is selected only part of the wording is displayed.

Is there a way to set the width of the box to either automatically adjust the width, or set it to a set width wide enough for the longest description.

Thanks.

Hi chriso0258,

I think that this is mostly a problem with IE, there was a recent thread about the same question. If I remember correctly styling the width with 'auto' helped??

Bob

I have the same problem, and i am unable to find a solution to be able to adjust the width of the box.
and it is not an IE problem. if i take the HTML code and check it in HTML-Kit is shows enough space, but not when we use it in Joomla.
currently using chronoform 4.04 and Joomla 3.2

anybody has an idea to fix this please?

thanks

Hi,

Not sure if this applies, but recently in several J3.2 templates I've seen CSS that sets the width of selects, some even set the width of all form elements. I'd suggest using FireBug in FireFox to examine the css applied to the form elements to see where the width is being set.

Also, IE has limited the width of select boxes for a long time. If you're seeing it in other browsers, check the CSS.

Sloan

Hello,

I am using Joomla 3.2 and Chronoforms v4 and I want to reduce (not increase) the width of the drop-down. Values in my drop down are just 4 chars but it occupies the whole width of form. How do I do it in the Wizard. Haven't been able to find any way to do it.

I want to put this drop-down with another text field on the same row.

Amal

Hi Amal,

I'd use CSS in a load CSS action to set the element width.

Bob

GreyHead,

Am unable to get CSS going. For a field "ip_select_branch" I wrote in "Class" cfdiv_select_branch and in the Load CSS I wrote

cfdiv_select_branch select { float: left; width: 50px; }

This has no effect. If I change the basic div of Select defined by CF as below then it has effect.

.cfdiv_select select { float: left; width: 50px; }

Is that the correct way to do it. I checked the form source, looks all ok to me. The class="cfdiv_select_branch" seems to have NO effect.

<form action="http://localhost/mysite/index.php/addrbook?chronoform=cf_addrbook&event=submit" name="cf_addrbook" id="chronoform_cf_addrbook" method="post" class="Chronoform">
  <div class="ccms_form_element cfdiv_select multiline_start" id="ip_select_branch1_container_div" style="">
    <label>Branch</label>
    <select size="1" class="cfdiv_select_branch" title="" name="ip_select_branch">
      <option value="CDB">CDB</option>
      <option value="DKB">DKB</option>
      <option value="DMS">DMS</option>
...

Thanks
Amal

Hi amsharma,

It may be a copy and paste error but your first example is missing the . before the class name.

Bob

GreyHead,

The dot had not helped earlier when I tried. My CSS knowledge is not great. It got solved when I removed "select" after the class name. I thought the class would take effect only in the case of a "select" if I specify it that way.

Thanks, Amal