Is There an Easier Way to Create This?

I have a style developed throughout my program, which is a huge program. But when starting the project a few years ago, I simply overlapped two controls, a label and a text field. They were made to look as though it was one control but they are actually two controls. Here’s a picture.

The problem is that there are a ton of these throughout the app. It’s a nightmare to try an align all the labels and then overlap them so that I have an organized and aligned page. I need help. I need to be able to get this down to one control that I can set the width on the label side and the width on the text field side and not have to worry about lining up two controls. The will still need to be the same style.

I know there are a lot of geniuses in the forum, so any help is appreciated. I know it might end up having to use javascript and thats okay.Thanks for any help.

take a look at the containercontrols. they should fit what you want.
https://documentation.xojo.com/api/user_interface/web/webcontainer.html#webcontainer

Looks exactly like a Bootstrap input group, which GraffitiTextField for Web implements and provides a ton of features for, if you’re willing to go the third-party route. If not, I apologize for the noise.

1 Like

This calls for a class. You can do that fairly easily with a container, and then use it throughout the program without having to align.

You wouldn’t happen to have any examples of something like that would you? Ive been working with Xojo for around 7 years now. I really haven’t done much with classes beyond storing some related properties. It would be a great help.

take a look at :
Xojo//Example Projects/Web/Containers/ContainerControlExample.xojo_binary_project

more precisely the “todaycontainer” in the project.

Indeed TodayContainer is almost what Jeffery needs.

Okay, I have pulled up the example. Ive used containers like this in a past attempt but I went away from them because once the width of the label and width of the text field are set in the container, they can’t be changed when they are added to a page. Is there a way to set these up so that I can pass in width for the label and text field?

Also, how can I use the text change event and got focus of the text field from the page when they are in the container?

add properties for the width and height of the text you need to the containercontrol
use the inspector behavior to display these properties in the navigator pane
in the open event of the container, set the width and height of the text item to the one of the properties and voilà.

for the textchange event, in the text itam of the containercontrol, set the textchange event to call a new defined event that has the same name textchange. and if the text is changed inside the container, it will call your event in the class instance.

Is there a reason to change these other than if the user resizes the container?

Use the container’s Resized event to changes sizes, for instance.

you can also use the locking mechanism to lock the text item left and right, so if you resize the container, the inside text will be resized by the same amount the container has been resized.

Okay so I added properties to the container control. When I select inspector behavior from the control, and then click on the add button, the only thing it will allow me to add is a heading label but not the properties that I created. Not sure what I am doing wrong here.

The label and text field will be used hundreds of different places. Sometimes the sized of the label needs to be smaller to save space on a window its being added to. Also I will be changing the label text and sometimes the label has to be able to fit more text in it.

I take it these are instances of the container that you are creating in the IDE? You say you added properties. I assume you mean properties and not controls?

right-clic on the containercontrol and select inspector behavior, and there you can check the properties you made earlier. you don’t have to add anything (except if you want to put the properties in another section of the navigator inspêctor)

edit: ho and you have to make the properties public, or they won’t appear for checking in the inspector bahevior.

I didn’t have the properties public. They weren’t showing up for me. This should work. Thank you for your help!