0 Replies Latest reply on Jul 4, 2012 4:08 AM by akhilbhartiya

    jQuery UI Resizable doesnot works for rich:popupPanel

    akhilbhartiya Newbie

      Hello Everyone,

      I tried binding jquery resizable to a rich:popupPanel class but it doesnot works.


      The draggable works fine over the same rich:popupPanel class. I am using richfaces 4.2.1 version with jdk1.6 & websphere server 7.2


      A small explanation for draggable & resizable is as below:


      <rich:jQuery selector=".class1"

      query="draggable({ handle: 'div.rf-pp-hdr', containment: '#application-content', stack: 'body div.ui-draggable', grid: [ 10,10 ], stop: function(event, ui) { alert(ui.helper.attr('id'); alert(ui.position.left); alert(ui.position.top); }

                                      })" />


      <rich:jQuery selector=".class1"

                    query="resizable({  stop: function(event, ui) { alert(ui.helper.attr('id');alert(ui.size.left); alert(ui.position.top);}

                                             })" />



      Some buzz going in my mind:


      > Is this because, the popuppanel is already re-sizable ( I tried it making the popuppanel resizable false, but no luck )


      > When i inspected the element with the firebug in mozilla, i found that resizable jQuery is creating "Ghost" Divs inside the popuppanel Div.


      <div id="popuppanel1" style="display: block;">
          <div id="popuppanel1_container" class="rf-pp-cntr viewlet ui-draggable ui-resizable" style="position: fixed; z-index: 100; width: 354px; height: 284px; left: 82px; top: 141px;">
              <div id="popuppanel1_shadow" class="rf-pp-shdw" style="opacity: 0.1; width: 354px; left: 5px; top: 5px; bottom: -5px;"></div>
              <div id="popuppanel1_header" class="rf-pp-hdr " style="cursor: move;">
              <div id="popuppanel1_header_controls" class="rf-pp-hdr-cntrls ">
              <div id="popuppanel1_content_scroller" class="rf-pp-cnt-scrlr" style="width: 354px; height: 259px;">
              <div id="popuppanel1ResizerW" class="rf-pp-hndlr rf-pp-hndlr-l" style="cursor: w-resize;"></div>
              <div id="popuppanel1ResizerE" class="rf-pp-hndlr rf-pp-hndlr-r" style="cursor: e-resize;"></div>
              <div id="popuppanel1ResizerN" class="rf-pp-hndlr rf-pp-hndlr-t" style="cursor: n-resize;"></div>
              <div id="popuppanel1ResizerS" class="rf-pp-hndlr rf-pp-hndlr-b" style="cursor: s-resize;"></div>
              <div id="popuppanel1ResizerNW" class="rf-pp-hndlr rf-pp-hndlr-tl" style="cursor: nw-resize;"></div>
              <div id="popuppanel1ResizerNE" class="rf-pp-hndlr rf-pp-hndlr-tr" style="cursor: ne-resize;"></div>
              <div id="popuppanel1ResizerSW" class="rf-pp-hndlr rf-pp-hndlr-bl" style="cursor: sw-resize;"></div>
              <div id="popuppanel1ResizerSE" class="rf-pp-hndlr rf-pp-hndlr-br" style="cursor: se-resize;"></div>
              <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
              <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
              <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>
          <script type="text/javascript">


      ("Ghost" because, i am not able to see its Id but only the class. Please refer the red font. and since its Id is not there, i am not able to catch it on the page.)


      > I also tried using the option "alsoresize" but no luck, it keeps on nesting the ghost div in the popupanel div.


      Thanks in advance for any response towards this question.