2 Replies Latest reply on Feb 19, 2013 7:58 PM by newuser001

    outputLabel width exceeds the width of rich:panel

    Tamer Mohamed Newbie

      hello there , i've a trouble

      is that i displayed an outputLabel within rich:panel

      i need the width of rich:panel increased automatically based on the width of its contents.

       

      please find the attached screenshot.

       

      Good Luck

        • 1. Re: outputLabel width exceeds the width of rich:panel
          Siva P Master

          Hi Mohamed,

           

          I have tried in my code like below,

          Its working fine and if u resize the screen scroll bar is displaying. Automatically it is comming down.

          Tried with rich:panel and rich:togglepanel also.

           

            <rich:simpleTogglePanel id="tpanelId" label="Document Search Filter" switchType="ajax" opened="#{docLibraryHome.hideTogglePanel}"

                       actionListener="#{docLibraryHome.togglePanelListener}" onexpand="hideTogglePabelExpandfn();" oncollapse="alert('collapse')">

                     

                      <s:decorate template="layout/display.xhtml">

                          <ui:define name="label">Category type</ui:define>

                      <h:selectOneMenu value="#{docLibraryHome.searchCategoryIdByMasterObj}" style="width:250px">

                          <s:selectItems value="#{docLibraryHome.masterCategoryList}"

                          var="obj" label="#{obj.categoryType}" noSelectionLabel="Select Category"></s:selectItems>

                          <s:convertEntity/>

                      </h:selectOneMenu>                

                      </s:decorate>

                     

                   

                 

                     

                     <s:decorate template="layout/display.xhtml">

                          <ui:define name="label">Title</ui:define>

                          <h:inputText id="title" value="#{docLibraryHome.searchTitle}" size="44"/>  

                      </s:decorate>

           

                      <s:decorate template="layout/display.xhtml">

                          <ui:define name="label">Primary project</ui:define>

                          <h:inputText id="primaryProject" value="#{docLibraryHome.searchPrimaryProject}" size="44"/>

                      </s:decorate>

           

                    <s:decorate template="layout/display.xhtml">

                          <ui:define name="label">Filename</ui:define>

                          <h:inputText id="filenameExtension" value="#{docLibraryHome.searchFilename}" size="44"/> 

                      </s:decorate>

                     

                      <h:panelGrid columns="8" border="0" >

                                          <h:outputText value="Created Date" styleClass="label_new"/>

                                          <h:outputText value="From" styleClass="label_new_From"/>                                

                                          <rich:calendar id="searchingDateFromField" styleClass="celcom01" inputClass="celcom01"

                                                                      value="#{docLibraryHome.searchCreatedDateFrom}"                                                                                                        

                                                                      locale="en/US" popup="true" datePattern="dd/MM/yyyy"

                                                                      showApplyButton="false" cellWidth="24px" inputSize="11"

                                                                      cellHeight="22px" style="width:200px"                                                        

                                                                       >

                                             

                                          </rich:calendar>                               

                                          <h:outputText value="To" styleClass="label_new_To"/>

                                          <rich:calendar id="searchingDateToField" styleClass="celcom01" inputClass="celcom01"

                                                                      value="#{docLibraryHome.searchCreatedDateTo}"                                                                                                           

                                                                      locale="en/US" popup="true" datePattern="dd/MM/yyyy"

                                                                      showApplyButton="false" cellWidth="24px" inputSize="11"

                                                                      cellHeight="22px" style="width:200px">                       

                                         

                                          </rich:calendar>                                                                                    

                                      </h:panelGrid>                           

                     

                                 

                       <s:decorate id="fileID" template="layout/display.xhtml">

                          <ui:define name="label">File Type</ui:define>

                          <h:inputText id="etabinput" width="170" value="#{docLibraryHome.searchFileExtension}" class="watermarkOn">                       

                          </h:inputText>

                          <rich:suggestionbox id="suggestionBoxId1" for="etabinput" width="170" nothingLabel="no entry found"

                                  suggestionAction="#{docLibraryHome.autocompleteInspector}" fetchValue="#{mimetype.fileExtension}">

                                  <h:column>

                                      <h:outputText value="#{mimetype.fileExtension}"/>

                                   </h:column>                         

                          </rich:suggestionbox>

                          <h:outputText value="(Suggesion List)"/>

                      </s:decorate>

                        <s:decorate template="layout/display.xhtml">

                          <ui:define name="label">Primary project</ui:define>

                          <h:outputLabel value="1111111111111111111111111111111111111111111dfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdwoiuerywerlknv.,bnvcmjoiaydsaiuyudrfhgacxzcmxz/.c,mzxpocuxzpcfduisavfdsf vsdfcsfsjdkfdslkjfdsnf.,mczxnbczciuftiuewfrewjkrnmjewoirwyeroiewuriewjfslkdnvc,mxznvmxzbvcYZrdwatderw;lkwqen;ssfsnmdbfmdsbfmdsfwoirewoityretoireytoireaxgfdafsdxfsagdsaoisafdnfnsoifdnmofdds" />

                      </s:decorate>        

                        

                   </rich:simpleTogglePanel>

           

          Togglepanel.png

           

          If it is showing error.Please show some of the code for reference.

           

          Thanks and Regards,

          Siva

          • 2. Re: outputLabel width exceeds the width of rich:panel
            newuser001 Newbie

            Using the "rich:column and the style class" we can resolve the problem. It only works in IE not in FireFox

             

            style : "word-wrap:break-word;"  this style will break the word by the size.

             

             

            <h:panelGrid columns="2" border="1">

                                <rich:column width="30px" style="word-wrap:break-word;">

                                    <h:outputLabel value="dhfoooooooooooooooodfsdfsadfsdfsdfsdfkhasdk"/>

                                </rich:column>

                                <rich:column width="30px" style="word-wrap:break-word;">

                                    <h:outputLabel value="sdfsdfsdfsdfsdfsdfsdfsdfsdgsdfgdsfgdfgsdfghfjkhasdk"/>

                                </rich:column>

                            </h:panelGrid>

             

             

            some time the bottom scroller will not appear in IE.