0 Replies Latest reply on Oct 12, 2010 6:41 AM by chamila piyasena

    Rich inplaceInput editable mode rendering issue

    chamila piyasena Newbie

      Hi,

      I'm using the rich inplace input in a modal panel. When I click on the component to make it editable the editable text box is appearing on top of the actual text(i.e the actual text is still visible under the  input text box). But as the actual behaviour should be the editable text box coming in the place of the actual text. I'm not sure whats wrong there.

       

       

      the code of the modal panel is

       

       

      <rich:modalPanel id="propImageModal" autosized="true">
               <f:facet name="header">
                  <h:panelGroup>
                     <h:outputText value="Preview Image" />
                  </h:panelGroup>
               </f:facet>
               <f:facet name="controls">
                  <h:graphicImage value="/img/popup_close_btn.png" style="cursor:pointer"
                     onclick="Richfaces.hideModalPanel('propImageModal')" />
               </f:facet>
               <div id="imageDiv"><img id="modalImage" src="#{propCompletion.displayImage.imageUrl}" /></div>
               <table cellpadding="0" cellspacing="0" width="170">
                  <tr>
                     <td height="3"></td>
                  </tr>
                  <tr>
                        <td width="120" align="center"><a4j:form><rich:inplaceInput maxlength="50"
                           onviewactivation="old = event.memo.oldValue;" layout="block" value="#{propCompletion.displayImage.name}"
                           defaultLabel="Click to add title" id="editPropImageName" showControls="true">
                           <a4j:support action="#{propCompletion.saveDisplayImage}" reRender="editPropImageName" ajaxSingle="true" event="onviewactivated"
                              onsubmit="if (event.memo.value == old) return false;" />
                        </rich:inplaceInput></a4j:form></td>
                        <td width="50" align="right"></td>               
                  </tr>
               </table>
               <a4j:form>
                  <div class="ButtonArea"><a4j:commandButton
                      title="Delete" image="../img/bin_active.png" id="imagedelete"
                     value="Delete"
                     onclick="Richfaces.showModalPanel('confirmPropDelete');"/><a4j:commandButton
                     style="border : 0px;" image="../img/bin_inactive.png" 
                     value="Delete" /></div>
               </a4j:form>
            </rich:modalPanel>     
      

       

      A sample screen shot of the modal panel is as below and I have highlited the text box in a red colour border.

      delete_image_iss.png

       

      Can any one help me on this