jQuery UI Resizable doesnot works for rich:popupPanel
akhilbhartiya Jul 4, 2012 4:08 AMHello 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>
</div>
<script type="text/javascript">
</div>
("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.
-Akhil