Impossible to have CSS margin on Label

[nick.shrayer.2]

Hello Isomorphic,
I'm trying to specify margin-left, margin-right CSS attributes on CSS class assigned to Label instance. This does not have effect though because you apply CSS class name to <TD> element which could not have margin. Specifying margin as the attribute of Label instance itself works but then I could not specify margins separately for left/right/top/bottom. How could I overcome this problem?

The code which demonstrates the problem:

CSS:
<style>
.myCanvas {
background-color:red
}
.myLabel {
margin-left: 10px;
border: 1px solid black;
background-color:green;
}
</style>

Code:
var theCanvas = isc.Canvas.create({
width: "300",
height: "300",
styleName: "myCanvas",

children: [
isc.Label.create({
styleName: "myLabel",
contents: "This is label"
})
]
})

theCanvas.show()

I expect label to be shifted related to canvas by 10 px from the left side. But this does not happen.

[shresthg_des]

Could you use padding-left/padding-right instead of margin?

[Isomorphic]

CSS margins have a lot of bizarre behaviors written into the CSS specs (the bizarre margin-collapse rules and their lost list of exceptions), to the point that the maintainers of CSS have sometimes discouraged people from using them for layout, *even aside from* the dense thicket of browser bugs related to margins.

We feel the same - avoid use of CSS margins unless you don't have a choice. Positioning can be much more readily achieved with Layouts, absolute positioning (including our snapTo feature), and other capabilities.

[nick.shrayer.2]

Hi,

I of course understand what you mean. Indeed "margin" is a problematic thing in CSS but what I intend to do is very simple. Also it's supported with Canvas so it makes perfect sense to inherit this support down to Label.
I only intent to put Label inside Canvas, having visual border on that Label, but border not to be adjacent to Canvas border. Please note, I want such graphical design to be implemented on CSS level, without introducing new Canvas or Layout or other complexity. This facilitates easy adjustments in case we later need to customize/adjust UI design. After all, the layout remains same, it's just a matter of graphics. The code and picture which demonstrate this are below:



<style>
.myCanvas {
border:1px solid black;
background-color: #AAAAAA;
}
.myLabel {
margin: 10px;
border: 1px solid black;
background-color:green;
}
</style>

<script>
var theCanvas = isc.Canvas.create({
left: 20, top: 20,
width: "300",
height: "300",
styleName: "myCanvas",

children: [
isc.Canvas.create({
styleName: "myLabel",
contents: "This is Canvas - this works"
})
]
})
var theCanvas2 = isc.Canvas.create({
left: 400, top: 20,
width: "300",
height: "300",
styleName: "myCanvas",

children: [
isc.Label.create({
styleName: "myLabel",
contents: "This is Label - does not work"
})
]
})

theCanvas.show()
theCanvas2.show()
</script>

[Isomorphic]

Yes, margin would be a very useful property if it did not have both bizarre behaviors in the spec, and serious browser bugs, making it all but useless in practice.

Our recommendation remains to just place the Label in a container and use the approaches we previously suggested.

[nick.shrayer.2]

Hi, I understand your recommendation. We will find our workaround for this situation. But honestly I do not understand your resistance. You do support margins in a very nice way and a way that makes sense all over SmartClient. So is this so problematic request to have this support for Label as well? Even just to be compliant with the rest of the framework...

[Isomorphic]

Yes, it is, because the reason the margin is difficult to support is wrapped up in browser bugs with reporting sizes when margins are used with tables, and our current approach already carefully dodges a series of interlocking bugs.