OK, I went down some rabbit holes trying to figure out just what is going on with this. It does look like something buggy is happening when trying to auto-fit a widget to its text width when anything else is done in a repeater’s OnItemLoad event that might affect the size or contents of that repeater cell.
I did arrive at three different methods for doing this --each with its set of benefits and disadvantages.
- First approach uses a dynamic panel with states for First, Middle, Last. It approximates text width by means of an “average character width” in a proportional font, with varying success. It is straightforward logic, all native to Axure, maybe good enough if visuals don’t have to be spot-on pixel perfect and/or text labels not too long.
- Second approach is directly tailored for your menu style. It uses one text widget in the repeater and dynamic panels to style the left and right borders. It sizes the items perfectly, but is somewhat limited in the interactions it can provide (e.g., can’t support different hover styles for unselected and selected items.) It is all native Axure, and if the menu items don’t need different left and right borders at the ends, the dynamic panels can be deleted.
- Third approach uses javascript, based on Gregor’s methods in this thread. It sizes the items perfectly, supports any number of item styles and interactions, but comes along with all the standard disclaimers about using javascript with Axure. It is a bit more convoluted, but good if you need to support perfect visuals and wide array of interactions.
Here is demonstration of these three approaches. I “show my work” in the child pages.
FIXED - Fit to Content in HTML.rp (813.0 KB)