Web IDE How can you control the layout?

I am frustrated with the IDE in Web 2.0 It is almost impossible to produce a consistent, clean layout. The spacing and size of the controls are only approximate. Here is a picture of the layout in the IDE (top), and how it places itself in Chrome/Mac. Note the spacing between items. Xojo seems to only have approximate control.

How can one precisely and predictably layout controls on a dialog?


I don’t experiment such differences.
did you try with another browser ?
(I would suspect a zoom factor in your chrome setup ?)

I’ve also been struggling through Web 2.0 for the past few weeks.It’s slowly getting better. For me it’s a mix of learning and workarounds.

I had similar problems. In my case it was due to the locking setting of the controls.

A 100% WYSIWYG solution will never exist for web development, unfortunately. Only an approximation. There was also a thread here in the last few weeks, but I haven’t found it currently.

1 Like

as andreas wrote, i think your anchor settings are wrong.
design time height and real have different sizes for some reason.

Is that a Dialog or a Container in your screenshot?

The reason I ask is that the buttons, label and combo control height are the same but the bounds are not at runtime. My experience is that they should be 1 to 1 (or nearly thus) unless there’s some other layout tweaking going on.

Now, if it’s a container… make sure you didn’t inadvertently make it smaller than the original when placing it on the view.

Also, post an example so we can take a look.

In xojo web the result alway uses btn-small, btn-large etc. sizes instead of the actual width and height given in xojo. Xojo does NOT overwrite these values 9/10 times which makes it like the above.

In the layout editor it does seem to honor the width/height but in the result it always reverts back to the bootstrap style default (btn-small or btn-large) css classes.

The above seems to be applying only on WebDialogs…

Thanks Greg. A few questions if you will please

What do you mean by “Bounds”? Are you saying the button width needs to be uniform?

This is a web dialogue. Not a container control. But should I expect different behaviors from containers than dialogs?

All of the controls are 38 pixels high.

The reason I asked is that in your screenshot, the “dialog” is definitely smaller than what was in the layout editor and that’s unexpected. In my tests, they are usually very close to 1:1 in terms of size on all current browsers. It’s one of the reasons we chose to go this route.

Now in terms of WebContainers, the size that you see when you are designing can be altered if you were to place it on another view and then change its size, which is what I thought had been done here.

As I mentioned, I’m going to need to see a sample project to track this down because if that truly is a dialog, your screenshot doesn’t make any sense.


By locking down the controls— Thanks Andreas-- we got this one under control.

Of course we have an outstanding bug in Firefox, that you have a source for.

But I have a workaround now for three browsers – and probably the fourth once the other bug gets fixed

1 Like
Forum for Xojo Programming Language and IDE. Copyright © 2021 Xojo, Inc.