PDA

View Full Version : [OPEN] BorderLayout: The text in the center panel gets clipped



rakshith
13 Dec 2006, 10:31 PM
In a BorderLayout on mozilla, the text in the center panel gets clipped when the east and west regions are collapsed and expanded.

However this is not happening on IE.

jack.slocum
13 Dec 2006, 10:44 PM
Can you explain a little more? I have border layouts all over the place and have never seen the title clipped (unless it's too long). Thanks.

rakshith
13 Dec 2006, 11:08 PM
Sure I can explain. Its not the title, but the text inside the center layout region that is getting clipped. I am creating a BorderLayout with all the regions from an existing markup in the following manner. Pasting the code get bit messy but i guess thats the best way to explain i guess. Let me know if u see any problem here

var layout = new YAHOO.ext.BorderLayout( document.body, {hideOnLayout: true

, north: {
split: false
, initialSize: 200
, titlebar: true
, collapsible: true
, animate: true
}
, west: {
split: false
, initialSize: 400
, titlebar: true
, minSize: 175
, maxSize: 400
, collapsible: true
, animate: true
}
, east: {
split: true
, initialSize: 400
, titlebar: true
, minSize: 175
, maxSize: 400
, collapsible: true
, animate: true
}
, south: {
split: true
, initialSize: 200
, titlebar: true
, minSize: 100
, maxSize: 200
, collapsible: true
, animate: true
}
, center: {}
});

layout.beginUpdate();


layout.add('north', new YAHOO.ext.ContentPanel('layoutarea1166073595371', {title: 'North!'}));
layout.getRegion('north').showPanel('layoutarea1166073595371');


layout.add('west', new YAHOO.ext.ContentPanel('layoutarea1166073595372', {title: 'Hi man! I am from west', closable: true}));
layout.getRegion('west').showPanel('layoutarea1166073595372');


layout.add('east', new YAHOO.ext.ContentPanel('layoutarea1166073595373', {title: 'Hi man! I am from east', closable: true}));
layout.getRegion('east').showPanel('layoutarea1166073595373');


layout.add('south', new YAHOO.ext.ContentPanel('layoutarea1166073595374', {title: 'Hi man! I am from south', closable: true}));
layout.getRegion('south').showPanel('layoutarea1166073595374');
layout.endUpdate();

layout.add('center', new YAHOO.ext.ContentPanel('layoutarea1166080115376', {title: 'Hi man! I am from center1', closable: true}));
layout.getRegion('center').showPanel('layoutarea1166080115376');


The markup which i have is,

<div>

<div>


</div>

<div>


Hi. I'm the west panel.

</div>


<div>


Hi. I'm the east panel.

</div>

<div>


Hi. I'm the south panel.

</div>

<div>


hi. I'm in the center panel

</div>




</div>

jack.slocum
13 Dec 2006, 11:15 PM
If you could paste it again wrapping it in a code block and checking "Disable HTML" it will format it and it won't strip your element attributes.

rakshith
13 Dec 2006, 11:29 PM
sure i will do that.. I am not listing out the scripts that i have included, except that i am pasting the entire code here.



<html>
<head>
<script>
var layout_init_1166073595375 = function()
{
var layout = new YAHOO.ext.BorderLayout( document.body, {hideOnLayout: true

, north: {
split: false
, initialSize: 200
, titlebar: true
, collapsible: true
, animate: true
}
, west: {
split: false
, initialSize: 400
, titlebar: true
, minSize: 175
, maxSize: 400
, collapsible: true
, animate: true
}
, east: {
split: true
, initialSize: 400
, titlebar: true
, minSize: 175
, maxSize: 400
, collapsible: true
, animate: true
}
, south: {
split: true
, initialSize: 200
, titlebar: true
, minSize: 100
, maxSize: 200
, collapsible: true
, animate: true
}
, center: {}
});
layout.beginUpdate();


layout.add('north', new YAHOO.ext.ContentPanel('layoutarea1166073595371', {title: 'North!'}));
layout.getRegion('north').showPanel('layoutarea1166073595371');


layout.add('west', new YAHOO.ext.ContentPanel('_cf_layoutarea1166073595372', {title: 'Hi man! I am from west', closable: true}));
layout.getRegion('west').showPanel('_cf_layoutarea1166073595372');


layout.add('east', new YAHOO.ext.ContentPanel('_cf_layoutarea1166073595373', {title: 'Hi man! I am from east', closable: true}));
layout.getRegion('east').showPanel('_cf_layoutarea1166073595373');


layout.add('south', new YAHOO.ext.ContentPanel('_cf_layoutarea1166073595374', {title: 'Hi man! I am from south', closable: true}));
layout.getRegion('south').showPanel('_cf_layoutarea1166073595374');_cf_layout.endUpdate();

};

</script>

</head>
<body>

<div>

<div>


</div>

<div>


Hi. I'm the west panel.

</div>


<div>


Hi. I'm the east panel.

</div>

<div>


Hi. I'm the south panel.

</div>

<div>


hi. I'm in the center panel

</div>




</div>

</body>
</html>

jack.slocum
13 Dec 2006, 11:33 PM
It still strip all your atrributes. :) You have to check "Disable HTML in this post".

One thing I noticed, you aren't adding anything to the "center" region?

rakshith
13 Dec 2006, 11:44 PM
Ok will do it right this time :D .. Yes, I am not adding anything to the center because I do not want anything specific property added to the center.. Shud i always add a default property to the center.. Let me know..



<html>
<head>
<script>
var layout_init_1166073595375 = function()
{
var layout = new YAHOO.ext.BorderLayout( document.body, {hideOnLayout: true

, north: {
split: false
, initialSize: 200
, titlebar: true
, collapsible: true
, animate: true
}
, west: {
split: false
, initialSize: 400
, titlebar: true
, minSize: 175
, maxSize: 400
, collapsible: true
, animate: true
}
, east: {
split: true
, initialSize: 400
, titlebar: true
, minSize: 175
, maxSize: 400
, collapsible: true
, animate: true
}
, south: {
split: true
, initialSize: 200
, titlebar: true
, minSize: 100
, maxSize: 200
, collapsible: true
, animate: true
}
, center: {}
});
layout.beginUpdate();


layout.add('north', new YAHOO.ext.ContentPanel('layoutarea1166073595371', {title: 'North!'}));
layout.getRegion('north').showPanel('layoutarea1166073595371');


layout.add('west', new YAHOO.ext.ContentPanel('_cf_layoutarea1166073595372', {title: 'Hi man! I am from west', closable: true}));
layout.getRegion('west').showPanel('_cf_layoutarea1166073595372');


layout.add('east', new YAHOO.ext.ContentPanel('_cf_layoutarea1166073595373', {title: 'Hi man! I am from east', closable: true}));
layout.getRegion('east').showPanel('_cf_layoutarea1166073595373');


layout.add('south', new YAHOO.ext.ContentPanel('_cf_layoutarea1166073595374', {title: 'Hi man! I am from south', closable: true}));
layout.getRegion('south').showPanel('_cf_layoutarea1166073595374');_cf_layout.endUpdate();

};

</script>

</head>
<body>

<div>

<div>


</div>

<div>


Hi. I'm the west panel.

</div>


<div>


Hi. I'm the east panel.

</div>

<div>


Hi. I'm the south panel.

</div>

<div>


hi. I'm in the center panel

</div>




</div>

</body>
</html>


I checked "Disable HTML in this post", but i do not see any difference it made to the post..

jack.slocum
14 Dec 2006, 7:26 AM
Very odd. I will assume your divs have the right attributes and ids.

Yes, you must add the "Hi I am the center panel" to the center otherwise it will remain in its initial spot and wont get move integrated with your layout (this could be the clipping you mentioned).