Issue with rendering RF components in DIV container
locutusut May 13, 2008 7:31 PMHello,
I have an issue where I'm rendering RF components inside a DIV container hierarchy. I'm not a CSS expert so bare with me, but to see what's going on you can see a screenshot http://picbite.com/13771pmfoev/.
My code is in XHTML as follows:
<ui:define name="content"> </script> </f:verbatim> <div class="section"> <ui:fragment id="messages"> <div id="messagesInsertionPoint"><h:messages errorClass="errors" /></div> </ui:fragment> <a4j:form id="pcrForm"> <fieldset> <div class="field"> <div class="label"><h:outputLabel for="ChangeType">Change Type:</h:outputLabel> </div> <div class="picklist"><rich:pickList styleClass="picklist"> <f:selectItem id="item1" itemLabel="Assembly Process" itemValue="1" /> <f:selectItem id="item2" itemLabel="Assembly Site" itemValue="2" /> <f:selectItem id="item3" itemLabel="Business" itemValue="3" /> <f:selectItem id="item4" itemLabel="Electrical Design" itemValue="4" /> <f:selectItem id="item5" itemLabel="Mechanical Design" itemValue="5" /> <f:selectItem id="item6" itemLabel="Package Marketing" itemValue="6" /> <f:selectItem id="item7" itemLabel="Packaging Materials" itemValue="7" /> <f:selectItem id="item8" itemLabel="Packing, Labeling, Shipping" itemValue="8" /> <f:selectItem id="item9" itemLabel="Second Foundry Source" itemValue="9" /> <f:selectItem id="item10" itemLabel="Test Process" itemValue="10" /> <f:selectItem id="item11" itemLabel="Test Site" itemValue="11" /> <f:selectItem id="item12" itemLabel="Wafer Fabrication Process" itemValue="12" /> <f:selectItem id="item13" itemLabel="Wafer Fabrication Site" itemValue="13" /> <f:selectItem id="item14" itemLabel="Wafer Probe Site" itemValue="14" /> </rich:pickList></div> </div> <br /> <div class="section"><rich:tabPanel switchType="client" width="100%"> <rich:tab id="ChangeDetails" label="Additional Information"> <div class="field"> <div class="label"><h:outputLabel for="ChangeDescription">ChangeDescription:</h:outputLabel></div> <div class="input"><h:inputTextarea id="ChangeDescription" value="#{pcnRequest.description}" style="width: 100%"></h:inputTextarea> </div> </div>
And my CSS is as follows:
.section { text-align: left; width: 505px; float: left; margin-bottom: 5px; } .field { float:left; } .field .label { float: left; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; font-weight: bold; width: 150px; text-align: right; } .field .input { float: left; width: 250px; text-align: left; } .field .output { float: left; width: 250px; padding-top: 5px; text-align: left; } .field .picklist { float: left; width: 250px; text-align: left; }
Do you know how I could get the RF components to not inherit the CSS from the container? As soon as I move them outside the container, they render fine.
TIA!
Lou