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.
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
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.
The most amazing thing is here, it also works great in the repeater
All you need is just three things
- set text to “scale”
- scroll to “scale” widget
- 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