On rerender, screen components are getting rearranged

[narvava]

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.

[boy18nj]

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

[ilya40umov]

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

[narvava]

Hi Aman,

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

Naresh.

[narvava]

<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.

[boy18nj]

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