5 Replies Latest reply on Jan 23, 2011 2:35 PM by Rocky S

    On rerender, screen components are getting rearranged

    narvava Newbie

      hi ,

      I am developing an application based on richfaces 3.3.3 and seam framework. I have couple of issues with ajax rerender on my screen.

      Scenario: On selection of a rich:combo box , enable some radio buttons.

      On selection of combo box value, I am setting disable true for radio components and rerendering them. Radio buttons are properly getting enabled but the arrangement of the radio buttons is getting altered.

      The same scenario can be reproduced on some other components.

      Could  you please help me to find out the cause for this problem.

      Thanks in advance,

      Naresh.

        • 1. On rerender, screen components are getting rearranged
          Rocky S Master

          Which browser you are using, can you try in Firefox, Chrome to see if it works correct?

          • 2. On rerender, screen components are getting rearranged
            Ilya Sorokoumov Master

            Please post your code and some screenshots to show what's happening.

            • 3. On rerender, screen components are getting rearranged
              narvava Newbie

              Hi Aman,

              Yes you are right. This is working fine with firefox. But could you guide, how to fix the same with IE.

               

              Naresh.

              • 4. On rerender, screen components are getting rearranged
                narvava Newbie

                <h:panelGrid columns="12" width="100%">
                       <rich:spacer width="10px" />
                       <h:outputText value="Group :" style="font-weight:bold" />

                       <rich:spacer width="5px" />
                       <rich:comboBox id="groupname" value="#{sdlRegdetails.grpName}"
                        defaultLabel="Select Group" required="true">
                        <f:selectItems value="#{scheduleAction.grpNames}" />
                        <a4j:support event="onchange" ajaxSingle="true"
                         BypassUpdates="false" reRender="coveragemonth" id="comboAjax">
                         <f:setPropertyActionListener value="one"
                          target="#{sdlRegdetails.enableCoverageMonth}" />
                        </a4j:support>
                       </rich:comboBox>
                       <h:outputText value="Coverage Month :" style="font-weight:bold;" />
                       <h:selectOneRadio value="#{sdlRegdetails.coverageMonth}"
                        id="coveragemonth"
                        disabled="#{!sdlRegdetails.coverageMonthEnable}"
                        style="width:100%;">
                        <f:selectItem id="currentmonth"
                         itemLabel="#{dateUtil.currentMonth}" style="font-weight:bold"
                         itemValue="currentmonth">
                        </f:selectItem>
                        <f:selectItem id="nextmonth" itemLabel="#{dateUtil.nextMonth}"
                         style="font-weight:bold" itemValue="nextmonth">
                        </f:selectItem>
                        <f:selectItem id="nexttonextmonth"
                         itemLabel="#{dateUtil.nexttoNextMonth}"
                         style="font-weight:bold;width:100px"
                         itemValue="nexttonextmonth">
                        </f:selectItem>
                        <a4j:support event="onclick" id="selectAjax"
                         action="#{scheduleAction.displayOCTSchedulePanel}"
                         ajaxSingle="true"
                         reRender="daysoftheweekpanelwrapper,daysoftheweekpanel,oncallpersonpanelwrapper,oncallpersonpanel">
                        </a4j:support>
                       </h:selectOneRadio>
                      </h:panelGrid>


                Code from action bean

                 

                public void setEnableCoverageMonth(String enableCoverageMonth) {
                 
                  logger.debug("Setting enabling value......");
                  if (enableCoverageMonth.trim().length() != 0
                    && enableCoverageMonth.trim().equals("one")) {
                   setCoverageMonthEnable(true);
                   logger.debug("Setting enabling value......as false "
                     + isCoverageMonthEnable());
                  } else {
                  setCoverageMonthEnable(false);
                   logger.debug("Setting enabling value......as true"
                     + isCoverageMonthEnable());
                  }

                  // this.enableCoverageMonth = enableCoverageMonth;
                  this.enableCoverageMonth = enableCoverageMonth;
                }

                 

                 

                On selecting the value from combo box , rerendering the radio button. Values are properly getting set.

                Before rerendering 3 radio buttons are alligned horizontally, getting rearranged to zigzag shape.

                • 5. Re: On rerender, screen components are getting rearranged
                  Rocky S Master

                  Hi Naresh,

                   

                  There are a couple of options to resolve this issue, you need to play with them to find most suitable for you...

                   

                  1) if the radio buttons get in ziz-zag shape, try to maximize or increase/decrease the browser window length if it resolves your issue.

                  2) Remove the style="width:100%;" or you can increase or decrease the value of width to find out if it works for you.

                   

                  <h:selectOneRadio value="#{sdlRegdetails.coverageMonth}"

                          id="coveragemonth"

                          disabled="#{!sdlRegdetails.coverageMonthEnable}"

                          style="width:100%;">

                   

                  3) check if your internet explorer is running in quirk mode, if it is disable the quirk mode. This site can also help you to find out if you are running quirks/standard mode- http://www.satzansatz.de/cssd/quirksmode.html