Scroll problem in LayoutDialog

[rashmiv]

Hi All,

I am using LayoutDialog for showing nested layout as a popup.



var HelloWorld = function(){

var dialog, showBtn;

var toggleTheme = function(){
getEl(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = getEl('btnSave');

// attach to click event
showBtn.on('click', this.showDialog, this, true);

// getEl('theme-btn').on('click', toggleTheme);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.LayoutDialog("hello-dlg", {
modal:true,
width:649,
height:774,
shadow:true,
west: {
split:true,
initialSize: 150,
titlebar: true,
collapsible: true,
autoScroll:true,
animate: true
},
center: {
autoScroll:true
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
var layout = dialog.getLayout();
dialog.beginUpdate();
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
var innerLayout = new YAHOO.ext.BorderLayout('content', {
south: {
split:true,
initialSize:650,
autoScroll:true,
collapsible:true,
titlebar:true,
fitToFrame:true
},
center: {
titlebar: true,
autoScroll:true,
fitToFrame:true
}
});
innerLayout.add('center', new YAHOO.ext.ContentPanel('upper', "More Information"));
innerLayout.add('south', new YAHOO.ext.ContentPanel('lower'));
layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
dialog.endUpdate();

}

dialog.show(showBtn.dom);

}
};


}();
YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);



and the html code is


<div id="hello-dlg" style="visibility:hidden;">
<div class="ydlg-hd">
Layout Dialog
</div>
<div class="ydlg-bd">
<div id="west" class="ylayout-inactive-content">

</div>
<div id="content" class="ylayout-inactive-content">
<form action="/jsp/checkIn.qsp" method="post">
<div id="upper" class="ylayout-inactive-content">
<input type="text" border="1" style="width: 100%">
</input>
</div>
<div id="lower" class="ylayout-inactive-content">

<div id="save-div1"
style="text-align:left;position: absolute; left: 5px; top: 35px; height: 600px; width: 486px;overflow: auto">
<table border="1px" width="486px" height="600px">
<tr>
<td style="margin-right: 8px;">
my content
</td>

<td>
<input type="text" border="1"
style="width: 100%;overflow: auto">
</input>
</td>
</tr>
<tr>
<td style="margin-right: 8px;">
my content 2
</td>

<td>
<input type="text" border="1"
style="width: 100%;overflow: auto">
</input>
</td>
</tr>
</table>
</form>
</div>
</div>



The area which contains the table should display scroll bars as the height and width are grater than that of container, but actaully it does not show any scroll bar.

I am not sure if I am missing something in settings.

Please help

Regards,
Rashmi

[Animal]

fitToFrame should be false on the innerLayout center Region.

[rashmiv]

Thanks for reply! It worked for IE but the problem is still there for Mozilla Firefox. Is there any way to resolve it on Mozill also

[Animal]

It works in all browsers for me. What you want is that the ContentPanel is its own natural size, however large that may be, and the Region Element has overflow:auto set (which is what autoScroll:true) does.

Check using Firebug that the div which is the Region has overflow:auto set, and that the div which is your ContentPanel is actually overflowing that element.