YUI 3

Ticket #2532425 (new enhancement)

Reporter


Marco Asbreuk 		Opened: 06/18/12
Last modified: 06/18/12
Status: new
Type: enhancement

Owner


Satyen Desai 		Target Release:
Priority:
Summary: Extending widget does not extent the contentbox-class
Description:

Hi Satyen,

Difficult to post a ticket on the architecture that is well thought of, but I give it a try...

When you look at the example below, both panels are not the same. I thought they would have been.
Reason they are not, is that the extended version (Y.OwnPanel) gets a class in the contentBox named 'yui3-ownpanel-content'. That is all-right, but it lacks the class yui3-panel-content. This is
frustrating I must say. The boundingBox gets both yui-panel as well as yui3-ownpanel, so why not the contentbox?

Extending widgets is very hard this way. Because now I cannot just extend a widget: I also have to redefine its contentbox-css. I only realized this now (after creating a lot of widgets). I'm sure
more developers will suffer this.

So, it seems in this case I have to define
.yui3-ownpanel-hidden {
visibility: hidden;
}

for letting the code panel.hide() work...

To get more deeper: I found that Y.Panel uses this css:
.yui3-widget-tmp-forcesize .yui3-panel-content {
overflow: hidden !important;
}

I reaaly don't know why it uses this, but it seems to me that I also have to define my custom css like:
.yui3-widget-tmp-forcesize .yui3-ownpanel-content {
overflow: hidden !important;
}

I hope you see my point: it would help a lot by rendering the the whole tree of dependency-classes in the contentBox as well.

Kind regards,
Marco.
Type: enhancement Observed in Version: 3.6.0pr2
Component: Widget Severity: S3 (normal)
Assigned To: Satyen Desai Target Release:
Location: Priority:
Tags: Relates To:
Browsers: N/A
URL:
Test Information:

<html>
<head>
<title>Check Panel</title>

<style type="text/css">
body {
background-color:#DDD;
}

</style>

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<script type="text/javascript">
YUI().use('panel', 'base-build', function(Y) {
Y.OwnPanel = Y.Base.create('ownpanel', Y.Panel, [], {
}, {
ATTRS : {
}
}
);
new Y.Panel({bodyContent: 'I am a Panel instance', xy: [400,100], width: 200, height: 100, zIndex: 1, render: true}).show();
new Y.OwnPanel({bodyContent: 'I am extended from Panel', xy: [100,100], width: 200, height: 100, zIndex: 1, render: true}).show();
});
</script>

</body>
</html>

Change History

Marco Asbreuk

YUI Contributor
Posted: 06/18/12

Just to let you know: in case of ownpanel.hide() that did not close, I created ticked #2532422

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info