[TUTORIAL]I seem to have found a funny and perfect way to achieve "Fit Content Width" for Axure 8&9 (no script injection)

advanced-prototyping

#1

First, Let’s make a “ruler”
step 1. Drag out a “Dynamic Panel” , name it “ruler”
step 2. Set “ruler” to “Scroll Horizontal” and cancel “Fit to Content”
step 3. Set “ruler” to 19999px width and 50px height.
image
step 4. Drag out a “Labal” in state1 of “ruler” , name it “scale”
step 5. set “scale” to x:20000px y:0px
step 6. Delete all characters and click “Fit Content Width”, it automatically becomes 1px width
image

OK, the “ruler” is almost done.

Second,Test it.

step 1. Drag out a “Box 1”, name it “box no padding” and set padding to 0px
step 2. Set “scale” and “Box 1” to same font and same font-style and same font-size.
step 3. Drag out a “Text Field”
step 4. Add “TEXT CHANGED” interaction.
image

The most amazing thing is here, it also works great in the repeater

All you need is just three things

  1. set text to “scale”
  2. scroll to “scale” widget
  3. set “box” to new size ( ruler.scrollX + box.padding )

Axure 8&9 demo files:

ruler_RP9.rp (78.5 KB)
ruler_RP8.rp (87.2 KB)
Preview:
https://uvji3u.axshare.com/#id=ug4988&g=1

This is a file from Axure Master mbc66
I add a new page to show a vertical ruler
fit to text in a repeater.rp (228.2 KB)
Preview:
https://1w7lo0.axshare.com/#id=n4gkve&g=1


Bug in repeaters when using "fit to content in html": Height of row to does not adjust in rendered html, only inside Axure