I have a form with several containers. To keep everything consistent in the design, I copy an earlier container and paste it (in the Project Explorer). But in the Level 4 container, I can’t move the line control down - have tried dragging it, and tried changing the top value (to 800, 900) but the line doesn’t move. Any advise?
(see Login form, container contLevel4 and contLevel5).
gradeApp.appstudio.zip (79.4 KB)
Take a look at your container’s position setting. It will determine how its children are positioned:
https://blog.appstudio.dev/2016/11/appstudio-6-positioning-controls/
I know about positioning - but just to be thorough, I tried them all. Also, all the containers are the same (I copy/paste them) so settings are the same and I adjusted top, left, etc. to position (wanted an absolute type of position). In this one container, a control was taller than in the other containers so I had to move a couple of controls that were below it down. I couldn’t do this - while there was room in the container, the controls wouldn’t drag, nor move when their top property was changed.
I had a look at your app.
The top of LineLevel4 is set to auto, just after chkbqReq4. The height of chkbqReq4 is set to 100, so the top of LineLevel4 will be 100 pixels below that. However, the content of chkbqReq4 requires more than 100 pixels.
The solution is to increase the height of chkbqReq4 to 120 - but even better, make it auto so it gets sized to the right height automatically.
I found that if an outer div section (container) has different positioning than the inner div section has will, at times, cause a similar problem during rendering - I pretty much ignore what the IDE shows as I’m developing in Windows. I’ve resorted to creating simple one form projects that only have the container and controls in it that I’m working with. I get that working, and then put it into the desired form. At that point, if the characteristics change, I can usually find them quickly in chrome element inspector.
I just found that to get a label to align vertically in a container with a radio buttons (and checkboxes), you must use flex, while normally I would use inline-grid for flowing items. In this case the IDE rendered identical to chrome
It’s definitely frustrating as it doesn’t seem to work as expected always, and WYSIWYG in the IDE …
Perfect - thanks so much!