Improving IDE Component Layout

Has anyone else noticed that it’s getting increasingly harder to accurately place components in the designer, especially in the Material design?

For example, drop a link into a column panel, make both full width rows then try and add another link next to the first one. It’s nearly impossible. I have to make the panel full width, the links not, and they I can with a certain dexterity get a new link to drop to the right of the original.

There are a few like that. The blue line that shows you where the component will drop is quite hard to get where you want it sometimes, and you’re often a fair way from the drop point when it does show in the correct place.

Is anyone else getting this?

It’s kind of bearable when you’re just starting a new form, but quite a pain if you’re trying to modify an existing complex form. It’s been like it for a while but I think it’s getting worse.

Could we maybe have a tree structure that would allow for precise manoeuvring once dropped?

Chrome & FF (latest) on Ubuntu 18.10

3 Likes

You’re not alone. My most complex form is VERY difficult to update/modify, whether it’s trying to place a new component or move an existing one - maneuvering the component just where I want it is often VERY frustrating.

2 Likes

In January we concluded an introductory programming course at my University with Anvil basics. Students were a bit perplexed when they tried to manage nested controls in menus and repeating panels in Material design. And I was too, if something didn’t went as it should on their workstations, trying to grasp what they put together :grinning:. So yes, I believe a slight redesign with stronger emphasis around widgets on the working bench would be beneficial.

2 Likes

Hi everyone, thanks for expressing this. We have some ideas in mind of how to improve the visual design experience and we’ll be making it a priority.

2 Likes

Shaun, glad to hear you guys are aware of the issue. FWIW, I do my dev on a Mac, and the same problems exist in both Chrome and Safari. Haven’t tried FireFox or IE. I’ve actually had to recreate forms from scratch to get my design as intended, carefully rebuilding the form literally top to bottom i.e. no inserting of components into the middle somewhere.

You won’t have to start from scratch. There are plenty of examples to borrow from.

For example, in Embarcadero’s RAD Studio, you can get an outline (tree), as mentioned above, and this really does help clarify the real structure (as opposed to the one you intended, or the one it looks like in 2D).

I like to think that this can really help new users understand what they’re really doing.

Embarcadero’s is a live outline of your UI. That is, you can select an item in the UI, by selecting it in the outline. (This is often faster than trying to guess where to click in a crowded form, esp. if the object is off-screen.) You can also delete an item, or re-parent it – or an entire branch – by drag-and-drop within the outline.

The difficulty, I think, will be in choosing a small set of features, that work together well, for most tasks. We wish you well.

I vote for a show outlines button on the form editor. The button should toggle the css and increase the margin of the droppable areas.

This will allow you to see the components with their real margins so you see what you get, or with visible fattened margins so you know where to drop.

Perhaps the toggle should be automatic when the drag starts, but it might be too invasive.