Place widget relative to other widget

[Sara_De_Ceulaer]

Is it possible to place a widget relative to another one?

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.

How can I get the behavior of divs next to each other in html?
Is it only possible by coding the move in the onload, based on the number of characters in the title?

Thanks in advance,
Sara

[mbc66]

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.

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]])

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.

[josephxbrick]

Hi!

You can do this with some javascript, which would give you the precise location to place your image after the text string.

To add javascript to an Axure prototype, you place it where you would normally put the URL string in the command Open Link to External URL. Or, in Axure 8, Open Link In Current Window choosing the external URL option.

The below will sound complicated, but don’t sweat it: there’s a sample file attached below.

I’m using a method of encapsulating code that I call a “function.” Axure doesn’t support functions, so I create a hotspot, assign code to the hotspot’s On Moved event handler, and prefix the hotspot’s name with “function_” so I can identify it as a function. That way when I want to “execute” this function, I just move the hotspot by 0,0. This technique isn’t necessary per-se, it’s just how I organize things.

For instance, if the text of your title is changed by various events in your prototype, you wouldn’t have to copy/paste the Open Link command containing the javascript: you’d just execute the “function” by moving the hotspot.

Below is the javascript code. Note that the name assigned to the widget containing your title text, as well as the name of the image (or dynamic panel or whatever) that you are moving to the end of the string must match the names in the code. The constant “spacing” refers to the space in pixels that you want the image to be placed after the string.

IMPORTANT: if you edit the javascript, avoid deleting the quotation marks, because if “Smart Quotes” are turned on in your operating system, typing a quote will screw everything up.

javascript:
{
  /* change values in the 3 lines below if spacing or widget names differ */
  const spacing = 10;
  const titleWidgetName = "title";
  const imageWidgetName = "widgetToMove";
  
  /* do not change code below */
  const title = $(`[data-label="${titleWidgetName}"]`);
  const axWidget = $axure(`@${imageWidgetName}`);
  const span = title.find('span'); 
  axWidget.moveTo(title.position().left + span.width() + spacing, axWidget.top(true),{});
  void(0);
}

So where you have the Set Text command that changes the text of your title widget, you’d do the following (pseudo code below):

On Whichever Event
  Set Text of title widget to (new text)
  Move function hotspot  by 0,0

Here is a sample (Axure 8) which also works in Axure 9.

Preview

File: move image to end of title.rp (55.4 KB)

[Sara_De_Ceulaer]

Thank you very much for all information.
Will have to try it out in during some quieter times.

Sara