Not fitting with "Fit to Content in HTML" in Repeater when DP state change or show/hide from Action

[jonsage]

I’ve recently been using a Repeater to create a horizontal menu - the “Fit to Content in HTML” is a must…

I wanted the First and Last items of the menu to have a different Widget Style, and whilst I can attach to “OnItemLoad” and determine which is the first and last quite easily, I obviously can’t dynamically set the Widget Style as Axure doesn’t support this.

The solution was to have multiple different Items within the repeater and Show/Hide the ones applicable for the first, middle and last states… all fine, hacky workaround but it should work…

HOWEVER, it doesn’t work… using Show/Hide, Set Opacity, Move, Set Size etc. all seem to force the “Fit to Content in HTML” to break and the item to be it’s original size - so all items become the same width…

The reason this feels like a bug especially is because in Axure itself the repeater supports and renders this perfectly… but when published it has each button stuck at it’s original width.

My workaround involves setting the Disabled state on items I want to hide, and this state has a opacity value of 0 as well as sending this item (to back) - this works… but now I can’t actually have a proper disabled state which I would like to have in my prototype as well - so there are bugs here.

https://hrvbn5.axshare.com/#c=2

BUG - Fit to Content in HTML.rp (114.0 KB)

[mbc66]

Axure can definitely do what you describe. Take a look at this thread where I posted a sample repeater which changes the style of menu items, along with the height of the item (it is a vertical menu.) You can adapt this approach for your horizontal menu.

Using a Repeater for Multi-level Accordion Navigation?:

So, you could create a dynamic panel for everything in your repeater cell, or just the background or whatever needs to be different. Copy the state twice to create three states, and name them “Normal, First, Last” Then edit the styles, sizes etc in each state to get them how you want them looking. Name each widget according to the state, so you can refer to it later, e.g., “labelNormal”, “labelFirst”, “labelLast” and keep in mind you’ll now have three of everything to deal with. So, your OnItemLoad code will need to set the text on three widgets (in this example), not just one. Now, if you dp is set to “Resize to fit” and your repeater is set to “Fit Content to HTML” then it should work correctly.

Furthermore, you can actually dynamically change the style of a widget, up to three styles. If you need more than two or three styles, use a dynamic panel and change states as above.

Typically, there are only two styles, unselected (normal, default) and selected. You can edit these styles from the Properties tab, below the Interactions code. To change it dynamically, just use the “set selected of MyWidget to true” (or false, or toggle). When the selected state changes it triggers events from which you can do things: OnSelectedChange, OnSelected and OnUnselected.

However, you can also create a style using the Disabled property to create a 3-state widget. Just remember that when a widget is disabled, its code won’t run. So, if you need to do something when this third state happens, or you need more styles you need to use a dynamic panel.

In your case, with a repeater and different sizes for your styles/states, a dynamic panel will work best, and when done right, will resize your repeater dynamically.

[jonsage]

Hi Thanks for this… I have achieved part of what I was looking for by making use of ‘disabled’, but I need ‘selected’ for actual interactive behaviour, and really I would like to be able to use ‘disabled’ for an actual disabled state as my component has one by design. There is still a bug happening here which I’d like to see fixed.

If you look at my axshare demo https://hrvbn5.axshare.com/#c=2 you can see I have tried the dynamic panel approach which works fine with the horizontal auto-sizing until I actually try to “Set Panel State” to achieve a different first and last item and then it breaks auto-sizing on all the items - you can view the .rp file for this here BUG - Fit to Content in HTML.rp (277.6 KB)

The Axure editor itself displays all methods as working, however when the prototype is published the sizing is broken - this is why I believe this is bug - this can’t be the intended behaviour,

[mbc66]

jonsage,

OK, now I see how this is (not) working for you. You are expecting the rectangle widgets to dynamically resize to auto-fit the text as it gets reset in the repeater’s OnItemLoad, but Axure does not support this.

Not a wholly unreasonable expectation, and this is a known issue, as reported in this thread from four years ago, and this thread and this thread from two years ago.

It is not so much a bug, as it is the lack of a feature, and it has to do with dynamically resizing a widget to fit the text–not with the repeater’s “Fit Content to HTML”.

The feature request has been made, but obviously not yet implemented.

Preview doesn't display dynamic size repeater items like the Inpector

auto-fit currently applies only to text set within the editor; shapes don’t auto-fit to dynamically-set text in the browser output. This is a notable point of confusion; it’s come up a fair amount and I’ll be updating our product team to review.

See josephxbrick’s trick to get around this–his basic approach could work for you, which involves manually setting the size of the widget after you reset the text, then putting that line of code in the OnItemLoad, making it “semi-automatic”. Only in his example, the text widget needed to resize its height (with a fixed width.) You’d need to resize the width instead, which gets tricky with variable-width fonts.

[jonsage]

Ok, I still believe this is a bug and not a lack of a feature despite Axure support saying otherwise haha…

1. The repeater item resizes to fit it’s content (the text) perfectly - even in the prototype - whether it’s in a shape or dynamic panel UNTIL I try to “Set State” on the DP or “Show/Hide” a shape or use Set Opacity etc. BUT it continues to work if I use the “Disabled” interaction style to hide items (with opacity) and setting that from OnItemLoad instead of setting the opacity directly…

2. The Axure Designer clearly shows this working in all cases no matter what I do, it only fails in the outputted prototype

I think this is an event/rendering lifecycle issue, sizes are calculated in a step before the content is changed and sizes are not recalculated. However if it can do it in the Axure Designer, and it also makes a hell of a lot of sense for this functionality to work, I feel more like the intended behaviour was I have suggested and expected… subsequently it may not have worked properly, but the current inconsistent behaviour is not how a feature would be designed. It may just the be the product of technical challenge one way or the other.

[mbc66]

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.

1. 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.
2. 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.
3. 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)

[jonsage]

Hi, I previously missed your last example - thank you for doing that - it’s very informative

I feel like although these workarounds are very impressive, they’re not really practical. I still hope they improve the behaviour of the repeater (and potentially all elements) to resize correctly on dynamic text changes - I’ll keep my fingers crossed for RP9!

Incidentally, do you know what the naming convention is for how group and element names translated to ids and classes in axure?

[praveen.naga]

@mbc66 This is a nice trick. It looks like the solution works well in Axure 8 but fails in Axure 9 Beta. As this looks good in the Canvas and fails in the browser, Axure team should consider this as a defect and fix it in Axure 9

Related Ticket:

BUG - Different outputs from the same repeater in Axure 8 & 9 Beta

GOAL: When the text length is long in a repeater, adjust the widgets in the repeater item by moving the widgets below the text to avoid overlapping(below screenshot). [overlap_issue] TRIED METHODS: Method 1: On Item Load: Load the item values from repeater columns > Wait > Move other widgets below the long text. This seems to work well in Axure 8 Canvas(see below screenshot) but didn’t work in the browser, so I have tried another method. [Method1] Method 2: (Based on the explorations …

[system]

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