function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Giving a fixed width to apex:selectList in visualforce page



In my visualforce page, i have a table consisting of a single row and three columns. The first column contains an apex:selectList, the second contains some buttons and the third column again contains an apex:selectList.

The problem is that whenever there are no items in the apex:selectList, it shrinks in size horizontally. Can i make the apex:selectList's have a fixed width irrespective of whether they contain any options or not ?

Below is the code i have :



  <td align="center">   
                  <h1><FONT COLOR="#254117">Column A</FONT></h1>
                  <apex:selectList  id="first_select_list" multiselect="true"  value="{!selectedObject}" size="10" >
                      <apex:selectOptions value="{!var1}"/>
  <td align="center">
                  <input type="button" value=">>" onclick="moveToRightList()"></input>
                  <input type="button" value="<<" onclick="moveToLeftList()"></input>
                   <input type="button" value="Save" onclick="saveState()"></input>
   <td align="center">   
                  <h1><FONT COLOR="#254117">Column B</FONT></h1>
                  <apex:selectList id="second_select_list" multiselect="true"  value="{!selectedObject}" size="10" >
                      <apex:selectOptions value="{!var2}"/>


Please help.

Thank You.



Hey rzs,


Use the attribute styleClass to define a CSS class. and then use it to define its width.


Within a <style type="text/css"> tag define :




   width: 300px;




This will make that select list 300px wide.


Hope this helps, Gaston.

David Roberts 4David Roberts 4
To clarify:
<style type="text/css">
        .sbox { width: 500px; }

[...pageblock, form  etc...]
<apex:selectList value="{!selectedObject}" multiselect="false" styleClass="sbox">