Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-13854

The width option of the style attribute in rich:select does not work

    Details

    • Sprint:
      4.5.0.CR2 - Sprint 1
    • Steps to Reproduce:
      Hide
      1. Deploy the sample application having richfaces 4.3.5 FINAL with the following idex.xhtml pag in plain standard JBoss EAP 6.2.0:
        <rich:select value="#{test.test}" style="width:200px" id='myTest'> 
        	<f:selectItem itemLabel="2" itemValue="1"/>
        	<f:selectItem itemLabel="2" itemValue="2"/>
        	<f:selectItem itemLabel="3" itemValue="3"/>
        	<f:selectItem itemLabel="4" itemValue="4"/>
        	<a4j:ajax event="selectitem" render="myTest txtTest" execute="myTest txtTest"/>	
        </rich:select>
        <h:selectOneMenu value="#{test.test}" style="width:400px" id='myTestH'> 
        	<f:selectItem itemLabel="2" itemValue="1"/>
        	<f:selectItem itemLabel="2" itemValue="2"/>
        	<f:selectItem itemLabel="3" itemValue="3"/>
        	<f:selectItem itemLabel="4" itemValue="4"/>
        </h:selectOneMenu>
        
      2. Enter the url http://localhost:8080/AppContext
      3. You will see that selectonemenu's width is 400 px and rich:select remains the same.
      4. Now stop the server.
      5. In the application ajaxcb.war/index.xhtml page, change the width to 400px as follows:-
        <rich:select value="#{test.test}" style="width:400px" id='myTest'> 
        ...
        
      6. In the application ajaxcb.war/index.xhtml page, change the width to 200px as follows:-
        <h:selectOneMenu value="#{test.test}" style="width:200px" id='myTestH'> 
        
      7. Start the server.
      8. Enter the url http://localhost:8080/AppContext
      9. You will see "selectOneMenu"'s width changed to 200px but "rich:select"'s size does not change and remains the same.
      Show
      Deploy the sample application having richfaces 4.3.5 FINAL with the following idex.xhtml pag in plain standard JBoss EAP 6.2.0: <rich:select value= "#{test.test}" style= "width:200px" id= 'myTest' > <f:selectItem itemLabel= "2" itemValue= "1" /> <f:selectItem itemLabel= "2" itemValue= "2" /> <f:selectItem itemLabel= "3" itemValue= "3" /> <f:selectItem itemLabel= "4" itemValue= "4" /> <a4j:ajax event= "selectitem" render= "myTest txtTest" execute= "myTest txtTest" /> </rich:select> <h:selectOneMenu value= "#{test.test}" style= "width:400px" id= 'myTestH' > <f:selectItem itemLabel= "2" itemValue= "1" /> <f:selectItem itemLabel= "2" itemValue= "2" /> <f:selectItem itemLabel= "3" itemValue= "3" /> <f:selectItem itemLabel= "4" itemValue= "4" /> </h:selectOneMenu> Enter the url http://localhost:8080/AppContext You will see that selectonemenu's width is 400 px and rich:select remains the same. Now stop the server. In the application ajaxcb.war/index.xhtml page, change the width to 400px as follows:- <rich:select value= "#{test.test}" style= "width:400px" id= 'myTest' > ... In the application ajaxcb.war/index.xhtml page, change the width to 200px as follows:- <h:selectOneMenu value= "#{test.test}" style= "width:200px" id= 'myTestH' > Start the server. Enter the url http://localhost:8080/AppContext You will see "selectOneMenu"'s width changed to 200px but "rich:select"'s size does not change and remains the same.
    • Affects:
      User Experience
    • Workaround Description:
      Hide

      Yes, it does exist.

      Adding a styleClass and then adding the following in the css:-

      <rich:select styleClass="rf-select-small-width" ...>
         <f:selectItems value="#{bean...}"/>
      </rich:select>
      

      and css:

      .rf-select-small-width input[type="text"] {
          width: 50px;
      }
      

      The limitation with this workaround is that the developer has to create different styleCLass'es for different rich:select widths.

      Show
      Yes, it does exist. Adding a styleClass and then adding the following in the css:- <rich:select styleClass= "rf-select-small-width" ...> <f:selectItems value= "#{bean...}" /> </rich:select> and css: .rf-select-small-width input[type= "text" ] { width: 50px; } The limitation with this workaround is that the developer has to create different styleCLass'es for different rich:select widths.

      Description

      The `style="width:200px"` does not work in rich:select as follows:

      <rich:select value="#{test.test}" style="width:200px" id='myTest'> 
      	<f:selectItem itemLabel="2" itemValue="1"/>
      	<f:selectItem itemLabel="2" itemValue="2"/>
      	<f:selectItem itemLabel="3" itemValue="3"/>
      	<f:selectItem itemLabel="4" itemValue="4"/>
      	<a4j:ajax event="selectitem" render="myTest txtTest" execute="myTest txtTest"/>	
      </rich:select>
      <h:selectOneMenu value="#{test.test}" style="width:400px" id='myTestH'> 
      	<f:selectItem itemLabel="2" itemValue="1"/>
      	<f:selectItem itemLabel="2" itemValue="2"/>
      	<f:selectItem itemLabel="3" itemValue="3"/>
      	<f:selectItem itemLabel="4" itemValue="4"/>
      </h:selectOneMenu>
      

      the width of "selectOneMenu" always changes with the values specified in style="width:400px", but rich:select ignores it.

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                michpetrov Michal Petrov
                Reporter:
                krathod Kunjan Rathod
              • Votes:
                0 Vote for this issue
                Watchers:
                7 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 45 minutes
                  45m
                  Remaining:
                  Remaining Estimate - 45 minutes
                  45m
                  Logged:
                  Time Spent - Not Specified
                  Not Specified