QUESTION:

"I am trying to set the width of the DualList list controls. One of my DataTextField entries of the DualList is 'Engineering and Manufacturing' and is therefore too wide for the for the default width. I have looked at the documentation and tried CSS but no luck. Any ideas on how to do this?"

ANSWER:

You can style the list controls by using the "ListStyle-..." properties. So, you can use: ListStyle-CssClass to set the CSS Class name for the list controls; you can use ListStyle-BackColor to set their background color, etc. Since the two list controls work as a single unit in the <DualList>, the styling you set will apply to both list controls.

Normally, I recommend using ListStyle-CssClass to control the styling in CSS. However, by default, the list controls that make up the DualList control, are set to 100px wide. This prevents them from shrinking to nothing if they have no content and no width is set -- a very un-attractive and un-professional look.  Because of this, you cannot set the width via a CSS class. The browser will give preference to the 100px width style over a width set via a CSS Class. So, you must set the width specifically.

Luckily, that's done simply by setting: ListStyle-Width.

Here's an example that sets the width of the list controls to 200px:

<DualList Id="FavoriteColors" DataField="Colors" DataType="String" ListStyle-Width="200">

  <ListItem Value="1">Item One</ListItem>

  <ListItem Value="2">Item Two</ListItem>

  <ListItem Value="377">Item Three-Hundred Seventy-Seven</ListItem>

</DualList>