The elements in the prototype dont match the preview - are shifted

[Kolek]

Hi,
I’ve had a problem in Axure few days. It’s about the cloud and the preview.Elements during prototyping are arranged correctly but during preview (also in the cloud using inspect or preview) they are moved. In screenshots I attach an example.

[mbc66]

First of all, each browser on each OS (and potentially each client) will render fonts a little differently, so rarely does text exactly match the RP editor’s page view. The more text you have in a widget the more a very minor variance will “add up” and/or “multiply” into these kind of “overflow” issues–in which the text takes up more or less space when rendered in the browser than it does in the editor. The “websafe” fonts tend to fare better than other custom proportional fonts. If you are using a webfont, they can vary from the “local version” of that same font name/family.

Secondly, it looks like you might be using different widgets for your titles/subtitles (larger, bold font) than for the “body” text (smaller font size.) If you paste all the text into one widget your results will be much better.

Third, if you really want to keep different text in different widgets, there are some methods to help ensure proper positioning and layout. these might be best demonstrated if you could upload your .rp file here. Some methods include:

• Create a “chain reaction” to move each text widget when the page loads.

  • Assign a Move action to the top-most (or “highest”) widget’s Loaded event that moves the second highest widget to [[This.bottom]] …or for a 10px margin, [[This.bottom + 10]].
  • Assign a Move action to the second highest widget’s Moved action that moves the third highest widget to [[This.bottom]]
  • Repeat this last step for the rest of the text widgets.

• Once you have your text set the way you want it in the RP editor, select each widget one by one and:

  • Convert it to an image using one of these options:

    • Copy & Paste:

      • Copy the widget
      • Right-click and choose “Paste as Image” (or select this option from the Edit menu.) You will then have an Image widget with “burned in” text that will not change and will look exactly as you have it in any browser (nor will it be selectable/editable in the browser; this has advantages and disadvantages of course.)
      • Either hide or delete the original widget

    • Directly convert the Shape widget to an Image widget by right-clicking and choosing Transform Shape > Convert Shape to Image

      • I recommend keeping the original widgets so you can make changes to the text later. Consider first creating a dynamic panel from your original widgets (select all your text widgets together then right-click and choose Create Dynamic Panel) then duplicating “State 1”, then converting the widgets in “State 1” to images. The “State 2” would be hidden from view by default but would still contain your original widgets as shape with editable text.

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.