Set width of component to width of its contents, in a ColumnPanel?

[claresloggett]

I have a fairly simple problem and I think I’m just missing something obvious.

I have a Link inside a ColumnPanel. The Link is the only thing on its row, which makes it occupy the full width of the ColumnPanel. If I set the text alignment of the Link to “center”, I get roughly the effect I want.

Now I’d like to draw a border around the Link. The border will be drawn around the entire Link div, which is the full width of the ColumnPanel. This looks a bit strange. I actually want the border to be just large enough to contain the Link text.

I know I can make the Link narrower by adding some dummy elements to the left and right in the ColumnPanel, but this (I think) will set a specified percentage width. Is there a way to make the width of the Link depend on the width of its text? That is, I want the width of the Link’s div to depend on its children, not its parent, and I’m not sure if there’s an Anvil property that sets that behaviour.

(full_width_row is NOT set, by the way. But the link does occupy the entire row, since there is nothing else on the row. Is that expected behaviour?)

[stucork]

I’d say this is expected behaviour.

The border property of a component is the whole component which in this case includes the outer div.

The same would be true of a button inside a column panel

An easy win might be to put your link component inside a flow panel. This way the component only takes up the width it needs rather than filling the space.

There are more complex solutions involving css - but I think the flow panel might work well enough here.

[claresloggett]

Thanks @stucork! That’s simple and works.