Has anyone come up with a way to semi-automate the layout when you (e.g.) change the text value of a label on a form, and you need everything else to shift left to accommodate it?
I mean, the simplest solution would be if Axure had a built-in grid control where you could drop widgets into cells and have the columns/rows adjust accordingly.
This is all for design-time use - not a runtime thing.
Is there anything like that?
Have people come up with workarounds for this mutiple-times-during-the-day problem?
can you draw up an example of what you’re thinking in terms of what moves/reflows? I think it’s the “shift left” part i’m getting stuck on/cannot picture
i.e. When you are designing a standard web form, and you change the content of one of the labels to be much longer or shorter, then you naturally want the entire column of input boxes to shift either left or right to accommodate the longest label on the form without extra, unnecessary whitespace.
Of course, in that simple example you can normally do this by hand without too much problem - however when you have more complex UI designs, there may be a whole, multi-layed collection of objects on the right-hand side that need shifting.
It’s just basic grid-style layout formatting that I am after (like Excel etc. etc.) - nothing more. Unfortunately the “Table” in axure doesn’t have the capability to house actual widgets in its cells - at least not as far as I can tell.
Where each [box] is aligned in a single column (impossible to do in these messages), and where one of those labels may be changed to something very long that widens the column of labels, pushing the [box] column to the right.
Just a basic grid layout really. Surely someone has done something like this before?
As I say, this isn’t for runtime use, but design time - so that I can change the contents of (say) a component and have other items on the pages incorporating the component, automatically adapt to the change in the component’s size, keeping the same distance from that component’s edges as before.
you could draw a picture or two in axure that demonstrates what it is you’re looking for and paste it in a reply.
i think it’s the “basic grid layout” is part of what’s tripping me up, i think i understand what you’re asking for and then i read that and have no idea, not your fault - it’s just that “grid” unfortunately means 100 different things. I don’t know if you’re talking about the old 12 column grid systems, css grid layout, excel or what. So I’m going to ignore that word and focus on the ASCII art example.
This is a repeater laid out vertically, it has an On Item Load interaction that resizes the input field with the following formula: Repeater Width - Label.width
Repeater Width is manually entered (some commentary on this in the demo)
Label.width is a LVAR
As I say - this is a design-time issue, not a run-time one.
I’m just after some kind of mechanism whereby the position of things on-screen whilst I am designing adjust their position and/or size in response to the size of other items - such as when a column gets wider, widgets to the right of it get pushed further right.
Well, your post at least reminded me that “Item Loaded” actually gets fired at design-time too, so it’s possible to do something a little clunky with a single-cell repeater that uses some calculation to modify the layout to display properly at design-time (and at run-time), but which then snaps back to the original values when you edit the repeater cell.
yeah i use a pattern like that a lot when building data grids, a horizontal repeater for the column list, one for a filter row, and then a vertical one for all the rows
