Auto layout during design time


#1

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?


#2

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


#3

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.


#4

you can use a repeater control perhaps, set to horizontal layout and set the label inside it set to Fit to Width

Is this what you’re looking for?

Demo | Excel Like Grid Layout.rp (45.6 KB)


#5

No - because in the repeater the widget of the cells have to be the same. I’m thinking of the standard layout:

Name: __________[box]
Address: ________[box]
Age: ___________[box]

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.


#6

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.

image

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

Demo | flexible label grid.rp (50.6 KB)


#7

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.


#8

i think we’re out of luck there, hold out hope we get a flex/grid layout-like thing in the future.