Border vs. Outline

Currently Xojo WE Styles are using the CSS property “border” to draw borders. However, “outline” might be a the better choice. Generally, the difference is that “border” adds up to the control’s total width/height, whereas outline is drawn on top of the control itself, not changing it’s space consumption.

It becomes increasingly annoying when working with container controls where you need to take care of border widths in order to avoid scroll bars (as the container’s contents get larger with borders) - but those cannot be obtained in code. Thus, either there should be a method to get the control’s actual dimensions (incl. the borders) OR Xojo should switch to CSS “outline”.

I hope it’s clear what I mean…

Please file a Feedback request for this.

I thought about it, yes. However, I give it zero chance in terms of implementation to be honest. I wanted to hear some opinions first…

I think it’s worthy because I discovered the other day that having a rectangle with nothing but a color fill still has a border around it. So it to get a complete fill you need to do extra work. Not a horrible deal but it still isn’t intuitive at first.

Just because they’re using border now, doesn’t mean that outline isn’t a better choice. There may be reasons for the choice that we are not aware of. The variable nature of browsers is simply awful. It might be as simple as border works in all browsers but outline only works in a smaller subset. I honestly don’t know.

I would put in a Feedback report. Sometimes you never know what asking the question will do when the engineer looks at it. They might ask the 'hhmmm…why DID we choose that?" and perhaps a change is made or perhaps they just close the report with a “won’t implement”. IMO submitting the report is better than not submitting.

Actually, I can tell you why we chose border. Not all of the browsers we started with completely supported CSS2, which is when the outline property appeared (remember, IE7 was one of our targets in the beginning). Also, our goal is to offer the most common rendering experience across all of the supported browsers. As you can imagine, this is a constantly moving target, what with Mozilla and Google releasing 10+ versions of Firefox and Chrome (respectively) each year. On top of all this, we don’t have the luxury of just changing from border to outline. It could drastically change how elements render in the browser, “breaking” nearly everyone’s project all at once.

I’m not saying that you shouldn’t file a feature request. I am saying that it should be to ADD outline, not replace border.

Thanks, Greg! I figured there was a reasonable answer.

For the record guys, there is also the box-sizing property that makes the layout model more compatible with Xojo’s. The width property becomes the total width, and border and padding subtract from that, rather than add to it.

If the property was widely accepted, I absolutely would have used it. But it wasn’t and still isn’t. Instead, the IDE tries its best to do the calculation. A 200px wide rect with a 1px border on all sides will be sent to the browser as 198px wide, so the end result matches your layout.

This is, of course, imperfect and cannot always work though.

Thom, the biggest problem comes in when trying to use a border as a highlight. You end up having to monkey with the position of the item relative to the size of the border. Also, there doesn’t seem to be an easy way to extract the actual size of a border from a Style. So that means you end up making assumptions in code that go out the window if you adjust the Style. I think that might be the real issue here… Styles are static are not easily queried.

Beginning to understand why Styles are (or were) read only? These stats were built into the control at build time.

Yes, it’s and issue. A big one. The layout model between Xojo and the browser is quite different.

FWIW, WebStyles are still read-only. If you need to do something more complicated, you’ll need to use the WebSDK.

But that only works for preset webstyles in the IDE. It doesn’t update the control when applying a webstyle in code, right?