Hi Hopki and Everyone,
I have a problem with the height of a child item.
I have a rectangle as parent with a height of 80 %. The I have a text field as the child of the rectangle. The text field is positioned y: 294 px with the anchor on top middle. Problem is, when the size of the web browser changes, the rectangle changes it height (as it is meant to be) but the text of the text field is not doing in the same matter. Please see the attached screenshots for explanation.
I would like to have the text field doing the same height as the parent rectangle item. I couldn't find any solution.
Any help from you guys is very much appreciated. Thanks!
Greetings
Ben
child item height depending on the height of parent item
- Attachments
-
- web view 2
- Bildschirmfoto 2021-11-11 um 13.16.22.png (233.7 KiB) Viewed 1242 times
-
- web view 1
- Bildschirmfoto 2021-11-11 um 13.16.06.png (268.09 KiB) Viewed 1242 times
-
- child
- Bildschirmfoto 2021-11-11 um 13.14.40.png (52.52 KiB) Viewed 1242 times
-
- parent
- Bildschirmfoto 2021-11-11 um 13.14.23.png (51.55 KiB) Viewed 1242 times
Best Regards,
Benjamin
Benjamin
- Hopki
- Gnome
- Posts: 13028
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi Benjamin,
The settings you are using will give you the results you are seeing.
If you set a Rectangle to Y: 0px and 100%, the height will be the same size as the window.
If you now change Y to 50px it will shift the rectangle down by 50px but still be 100% of the window so will drop off the bottom of the screen.
You need to use CSS.
For example, if you wanted a rectangle to be 50px from the top and 50px up from the bottom but then 100% between these settings then you would use CSS.
The rectangle, set position Y: to 50px to push the rectangle down by 50px, so 50px off the screen at the bottom.
In the height settinng enter:
with the unit set to CSS.
What will happen is the rectangle is pushed down by 50px, but the CSS says -100px, so the rectangle is raised by 100px from the bottom, which will set it 50px up from the bottom.
But the CSS says 100% so the contents will be responsive.
Now do the same with the child text box, see the skin attached.
Regards,
The settings you are using will give you the results you are seeing.
If you set a Rectangle to Y: 0px and 100%, the height will be the same size as the window.
If you now change Y to 50px it will shift the rectangle down by 50px but still be 100% of the window so will drop off the bottom of the screen.
You need to use CSS.
For example, if you wanted a rectangle to be 50px from the top and 50px up from the bottom but then 100% between these settings then you would use CSS.
The rectangle, set position Y: to 50px to push the rectangle down by 50px, so 50px off the screen at the bottom.
In the height settinng enter:
Code: Select all
calc(100% -100px)
What will happen is the rectangle is pushed down by 50px, but the CSS says -100px, so the rectangle is raised by 100px from the bottom, which will set it 50px up from the bottom.
But the CSS says 100% so the contents will be responsive.
Now do the same with the child text box, see the skin attached.
Regards,
- Attachments
-
- skin.ggsk
- (1.02 KiB) Downloaded 133 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/