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