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
rzsrzs 

Giving a fixed width to apex:selectList in visualforce page

Hello,

 

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 :

 

 

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

 

Please help.

Thank You.

 

incuGuSincuGuS

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 :

 

 

.yourStyleClass{

   width: 300px;

}

 

 

This will make that select list 300px wide.

 

Hope this helps, Gaston.

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

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