PDA

View Full Version : Element.autoHeight troubles



SteveEisner
6 Nov 2006, 2:10 PM
Thanks, Jack, for the new autoHeight function.

First, a quick suggestion - can you update it to return the result of the calculation? That might help me with the longer problem I'm seeing below

What I want to do is to resize the north region of a layout, and see the center area automatically adjust. Specifically I want to change the contents of that panel, then auto-size it. I've not been able to get this to work either with an automatically calculated height -or- a manually set one.

First, what I'm seeing is that autoHeight on a content panel in a layout isn't working. I'm not exactly sure why; I'm going to try to build a small repro case but I don't think I'm doing anything really out of the ordinary. I thought it might be the automatic "height: XXX" style you add to panels, but I notice that the autoHeight function overrides that and applies "height:1" anyway.

Here's some code that I use to test it:


panel.getEl().autoHeight();
alert(panel.getEl().getHeight()); // Returns 64 - correct.
frameLayout.layout();

panel.getEl().addClass('whatever'); // a class which will cause it to display larger @ about 125px

panel.getEl().autoHeight();
alert(panel.getEl().getHeight()); // Returns 64: wrong because it is the old value
frameLayout.layout();
alert(panel.getEl().getHeight()); // Returns 173: wrong because it is too large now


The exact numbers aren't so important as the fact that a) the autoHeight calculation gets "stuck" to the old value before layout and b) the height is too large after layout. I can't figure out what might result in the 173 pixel calculation. It's not obviously the height of any sub content in that panel, etc.

Debugging this is made more difficult by the fact that most of the divs inside the panel are hidden, resized, etc. by way of CSS rather than explicit styling.

Long term what i'm looking for is the ability to just change my layout by resizing the elements inside the panels. (with automatic "onResized" watchers being applied by the layout regions.) But I can fall back on manual resizing if it works!

I'll try to post a complete sample but I also can point you to a site demonstrating this behavior!

Thanks,
Steve

jack.slocum
6 Nov 2006, 2:55 PM
autoHeight() now uses a setTimeout to get around an IE problem. This means when you call:

panel.getEl().autoHeight();
alert(panel.getEl().getHeight()); <-- still hasn't happened?
frameLayout.layout();<-- still hasn't happened?


You could try this:

panel.getEl().autoHeight(true, .01, frameLayout.layout.createDelegate(frameLayout));

It's not pretty but it might work. :)

SteveEisner
6 Nov 2006, 4:31 PM
Interesting - is that on released code somewhere? My copy of Element.js looks like:


/** Measures the elements content height and updates height to match. */
autoHeight : function(){
this.clip();
this.setHeight(1); // force clipping
var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
this.setHeight(height);
this.unclip();
},

so there are no additional parameters nor a setTimeout call that I can see? Maybe I downloaded an earlier beta2, I'll check.

After I try the newer code I can also report back about whether it's correctly calculating the height! (but my tests were in FF2 so I suspect it may still get it wrong if the calculation code above remains the same)

schmidetzki
14 Nov 2006, 9:16 AM
I have the same problem as Steve - beside that I want to automatically resize a south region based on the content in it.

Even if I use panel.getEl().autoHeight(true, .01, frameLayout.layout.createDelegate(frameLayout)); the region is not resized.
I may also set the panel size manually without a change of the region size.

The only thing that works is
region.resizeTo(panel.getEl().getHeight());
This resizes the region but the new height is not exactly the size it should be ...

Choleriker
10 Jan 2007, 4:38 PM
panel.getEl().autoHeight();
alert(panel.getEl().getHeight()); <-- still hasn't happened?
frameLayout.layout();<-- still hasn't happened?


You could try this:

panel.getEl().autoHeight(true, .01, frameLayout.layout.createDelegate(frameLayout));


It happend but nothing has changed at layout.

What was the solution here at last?

After 2 hours searching here i need help. I dont know the way to resize a region. My regions size still doesnt changed anyway and has always the same size. resizeTo() of the region still doesnt change anything too.

jack.slocum
10 Jan 2007, 7:33 PM
Hi, can you give any more info? resizeTo should get the job done. As for autoHeight() of a region, although it should work it really depends on what's in it.

Choleriker
13 Jan 2007, 3:03 AM
Hi, can you give any more info? resizeTo should get the job done. As for autoHeight() of a region, although it should work it really depends on what's in it.

For simplicity i have modified you nested layout example without to keep in mind to have clear html. As you can see, im using nested layouts.

The toolbar i add over the contentLayout (even a nested layout) isnt shown too. Which restrictions you have by using with nestedlayoutpanel? Or do i tink completely wrong?



<html>
<head runat="server">
<title>Test</title>

<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>

<script type="text/javascript">
window.CONFIG = {
debug: false,
debug_console: false,
bench: false
}
</script>

<script type="text/javascript" src=".../../yui-ext.js"></script>

<link rel="stylesheet" type="text/css" href=".../../resources/css/yui-ext.css" />
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
#header{
background: url(images/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 4px;
}
#footer{
background: url(images/header-bar.gif) repeat-x bottom;
border-top: 1px solid #083772;
padding:2px 4px;
color:white;
font:normal 8pt arial,helvetica;
}
#nav {
}
#nav, #inner1, #inner2 {
padding:10px;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(images/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.ylayout-panel-north, .ylayout-panel-south, #content .ylayout-panel-center{
border:0px none;
}
#content .ylayout-panel-south{
border-top:1px solid #aca899;
}
#content .ylayout-panel-center{
border-bottom:1px solid #aca899;
}
</style>

<script type="text/javascript">
YAHOO.ext.LayoutRegion.prototype.hideTabs = function() {
var _tabs = this.getTabs();
if(_tabs=='undefined' || _tabs==null) return false;
_tabs.stripWrap.setDisplayed(false);
return true;
};

Example = function(){
return {
init : function(){
// Events
this.heightSelect = getEl('menuHeightSelect');
this.heightSelect.on('change', function() {
getEl('navigation-menu-inner').setHeight(this.heightSelect.dom.value);
navigationLayout.getRegion('south').getActivePanel().getEl().autoHeight();
navigationLayout.layout();
}, this, true);


/**
* Haupt-Layout
**/
layout = new YAHOO.ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: false,
titlebar: true
}
});
// Layout-Update starten
layout.beginUpdate();
// Startseite
layout.add('center', new YAHOO.ext.ContentPanel('home', {title:'Willkommen'}));

/**
* Navigation-Panel Layout
**/
//layout.add('west', new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
navigationLayout = new YAHOO.ext.BorderLayout('navigation', {
south: {
split:false,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:false,
collapsible:false,
titlebar: false
},
center: {
autoScroll:true
}
});
// Detail-Panel
navigationLayout.add('south', new YAHOO.ext.ContentPanel('navigation-menu', "Menu"));
// Content-Panel
navigationLayout.add('center', new YAHOO.ext.ContentPanel('navigation-sub'));
// Login-Panel
navigationLayout.add('center', new YAHOO.ext.ContentPanel('login', "Anmeldung"));
// Nested-Layout in Haupt-Layout einbinden
layout.add('west', new YAHOO.ext.NestedLayoutPanel(navigationLayout));
// Tabs ausblenden
navigationLayout.getRegion('center').hideTabs();

/**
* Content-Toolbar
**/
// create the add feed toolbar
toolbar = new YAHOO.ext.Toolbar('content-tb');
toolbar.addButton({id:'add-feed-btn', text: 'Add Feed', className: 'add-feed', click: function() {
alert('toolbar-click');
}});

/**
* Nested Content-Layout
**/
contentLayout = new YAHOO.ext.BorderLayout('content', {
south: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:true,
collapsible:true,
titlebar: true
},
center: {
autoScroll:true
}
});
// Detail-Panel
contentLayout.add('south', new YAHOO.ext.ContentPanel('inner1', "More Information"));
// Content-Panel
contentLayout.add('center', new YAHOO.ext.ContentPanel('inner2'));
// Nested-Layout in Haupt-Layout einbinden
layout.add('center', new YAHOO.ext.NestedLayoutPanel(contentLayout, {title:'Content mit Toolbar', resizeEl:'content-body', toolbar:toolbar}));

layout.getRegion('center').hideTabs();
layout.endUpdate();
}
}

}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>

<link href="feed-viewer.css" rel="stylesheet"
type="text/css" />
</head>
<body class="ytheme-gray">
<div id="container">
<div id="login" class="ylayout-inactive-content">
Sample sub-content Login
</div>
<div id="navigation" class="ylayout-inactive-content">
</div>
<div id="navigation-menu" <%-- class="ylayout-inactive-content" --%>>
<div id="navigation-menu-inner" style="height:200px;">
Set height to:

<select id="menuHeightSelect">
<option value="200" selected="selected">200px</option>
<option value="100">100px</option>
<option value="50">50px</option>
<option value="300">300px</option>
</select>
</div>
</div>
<div id="navigation-sub" class="ylayout-inactive-content">
</div>
<div id="content" class="ylayout-inactive-content">
<div id="content-tb">
</div>
<div id="content-body">
</div>
</div>
<div id="inner1" class="ylayout-inactive-content">
</div>
<div id="inner2" class="ylayout-inactive-content">

</div>
<div id="home" class="ylayout-inactive-content">
<h1>Home</h1>
</div>
</div>
</body>
</html>

Choleriker
13 Jan 2007, 6:42 AM
Hint: i noticed that panels of the nested layouts doesnt appear at the location they are expected. If i call nestedLayout.beginUpdate() after i added the nestedLayoutPanel to the parent layout, the positioning of all elements goin absolutely crazy.

Choleriker
23 Jan 2007, 5:15 AM
After getting crazy with absolutely no effects by using autoHeight on the element of panel, i get the solution:



APP.layout.getRegion('south').el.autoHeight();
APP.layout.layout();