Drawing boxes around things on web

Here’s a basic newbie question from a 10+year xojo user, when I create a rectangle and drop things on it, it does some kind of grouping so that the objects inside move with it, however 99% of the time, if there is an object grouped with a rectangle you can’t click on it, or sometimes can’t even see it even if the rectangle is at the back. Am I doing something wrong?

Web isn’t the same as Desktop :slight_smile:

Web2 isn’t the same as Web 1 :slight_smile:

Now that we have that out of the way when I have needed to group things to draw a fringe or box or something to “group” controls I’ve used a WebRectangle and then altered its style

  • create a new web2 project (I’m using 2022r2)
  • to the default web page adda rectangle
  • drag a button on to the rectangle
  • add the opening event to the rectangle and put
me.Style.Value("box-shadow") = "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"


the "box shade property is a css one
see CSS all property

FWIW I think I got this from @HMARROQUINC

My real question is why does xojo put objects in a rectangle and then either randomly decides to display them , unless you move the item outside the box then use the coordinates to move them back in. In other words if you drop anything on a rectangle in Web 2.0 and even seen this in desktop why do they hide randomly (even if the rectangles in the background.

It’s all very odd is this a bug or a misunderstanding ?

z-order ?
thats the usual go to culprit

was the control on the page and then you moved it onto a newly created rectangle ?
or did you create the rectangle then add a control to that ?

this matters

make sure what ever control you put ON the rectangle is more “forward” than the rectangle
select the rectangle and press move to back
select the control you put on it & press move to front

that’d be my first try

Zorder makes no difference I always push the rectangle to the back and the objects I put on it to the front. Most of the time I won’t draw the objects in from unless I drag them out the rectangle and then manually set their x y coordinate into the rectangle so it does not highlight the rectangle with the red box.

Am I really the only xojo user that puts rectangles on a page to visually group controls for a better UI experience?

I posted that example above which works 2022r2 and 2022r3
I do that n client projects

That DOESNT work for you ?

Can you share a sample project? I haven’t seen this behavior before. Everything put on a rectangle is always visible.

What version of Xojo?

It’s to frame a group of controls, I’m also having a common issue with the z ordering being lost when you save and reload a project which means a 5 minute job every time I load xojo.

Simple to see drop a rectangle on a page , put a load of consoles on /imagine , save and load it a few times and some of the components you can’t click on anymore.
Web2.0 xojo 2021 I think will need to check , however I downloaded the latest released demo and still had same issues.

I’m sorry, I don’t know what “load of consoles on /imagine” means.

Do you save in Binary, XML or Text format? Saving in a different format do you get the same z ordering problem?

What is nasty is if you have, let’s say a tab, on that tab a rectangle, and within that rectangle a few buttons. Works fine until you want to change something (for instance adding a button). Nightmare. Sometimes the rectangle and the content might “move” to another tab when clicking on an element in the IDE etc. If you would then click save by mistake your backup is your only friend.

Best (and only way I found) is selecting the rectangle via the outline on the left and move it first with the cursor (not the mouse) outside of an area of the webpage in the IDE. Then make your changes. and then move it back (this works then again with the mouse).

Sorry, but I had to black out logo and customer related information on the screenshot.

Talking about releases until mid 2021, I moved away aftwerwards. Perhaps it improved meanwhile, perhaps it has not. w/o patching bugs from formerly owned licenses, it is useless to me.

1 Like

Same here.

I created a small test app, put a rectangle on the page. Put some fields ON it. First the fields are OUTSIDE the rectangle (in that “Tab-order” thing). Save it (binary). Leave it. Restore it: The fields are IN the rectangle now. Any attributes like visible, enabled etc. are inherited to the fields - which means they are disappearing randomly.

Anyhow it is often not possible to change the order of controls inside that box correctly. So it is not a problem if they are confused anyhow? What is it good for?

Is this a bug I should (try to) report? Again time wasted with quality problems.

Are you sure that the rectangle IS te parent? When you select a control, the border of the parent must be red and if you right click the control you must see a “unparent” option (must be there also if you are nesting an the control is inside the wrong parent)

Xojo sucks at this. They could nest the controls in the navigator and put the Parent property on the inspector but they focus on oter thing but productivity :man_shrugging:t2:

1 Like

I am so bored that I decided to make a video and put it on their forum:

1 Like

:face_with_raised_eyebrow: And what exactly is the problem with having the controls inside a parent? As is designed in a web page to be ???

I save it as binary, maybe that’s the issue as you say will try other formats.

If your problem is the same as Mick, then no, all formats behave the same.

I know what you mean, and yes as (often NOT always) there are “wordarounds” in the Xojo world. But one could conclude that the charme of a RAD tool and a layout manager is, that you can drag and drop your controls and things are not only working after your initial design, but that you can easily re-arrange stuff even w/o consulting any (non-existing :slight_smile: ) documentation … As you are saying: it is all about priorities …

I think you are describing the exact issue I have, one it works if you save it restart xojo then load it they all become screwed up.