Place widget relative to other widget

[mbc66]

@Sara_De_Ceulaer

I have a title that is dynamically filled with text, and need to place a label next to it.
I cannot find a way to let the label position itself next to the title , so if it is a long title, they are on top of each other.

If you are changing the text dynamically and the widget with the text is getting longer, you must be resizing it with Set Size, correct? After that action, just use a Move ‘MyLabel’ action. You can refer to a widget and its properties by using a local variable in in the fx Edit Text dialog. Common widget properties include .x, .y, .left, .right, .top, .bottom which can help you place widgets relative to other widgets. For example,

Move MyLabel to ([[LVAR1.right + 10]], [[LVAR1.top]])

…where LVAR1 is a local variable pointing a widget, like, ‘MyTitle’. This should place ‘MyLabel’ to the right of ‘MyTitle’ with a 10px margin, and top-aligned.

@Sara_De_Ceulaer

How can I get the behavior of divs next to each other in html?

The best approach I’ve found to automate this is to create a dynamic panel out of the widget or selection of widgets (and keep the default “Fit to Content” setting for the dynamic panel.) In this dynamic panel’s OnResize event, create a Move action, such as:

Move MyLabel to ([[This.right + 10]], [[This.top]])

@Sara_De_Ceulaer

Is it only possible by coding the move in the onload, based on the number of characters in the title?

If you use a widget’s *OnLoad event, then it would work only once–when the page is loaded. (Although you could trigger it later using a Fire Event action.) Using a count of characters would only work for fixed-width fonts, like Courier New or System. It doesn’t work for proportional fonts as each character has different widths. But, if you are using a fixed-width font you can get the character count of the text on any widget using the “length of widget value” option or a local variable call with [[LVAR1.length]] where “LVAR1” is the “text on widget”.

Here is a link to a thread from a few years back with this same issue, only moving an image widget instead of a text label widget. Would certainly work for your issue though.

Add icon after dynamic text

Yes, using a symbol font is a good solution, @Mike_Gray, and works well, especially when you need to embed an icon in the middle of a text block. However, finding, installing and testing/tweaking can sometimes make it less than simple–especially if you also need to set up web font mapping, for instance to make it work on mobile devices. If you need to use a custom icon, or one with multiple colors, states, photo image, etc. a different approach must be taken. Recently, there was a thread where…

Since you are dealing with text only (in both your title and label widgets) another possible solution would be to just include both text strings in one widget. Use the “rich text” option in the Set Text action to change the font properties of the title portion and the label portion.