child item height depending on the height of parent item

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
4ctive
Posts: 35
Joined: Mon Dec 16, 2019 10:07 am

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
Attachments
web view 2
web view 2
Bildschirmfoto 2021-11-11 um 13.16.22.png (233.7 KiB) Viewed 1177 times
web view 1
web view 1
Bildschirmfoto 2021-11-11 um 13.16.06.png (268.09 KiB) Viewed 1177 times
child
child
Bildschirmfoto 2021-11-11 um 13.14.40.png (52.52 KiB) Viewed 1177 times
parent
parent
Bildschirmfoto 2021-11-11 um 13.14.23.png (51.55 KiB) Viewed 1177 times
Best Regards,
Benjamin
User avatar
Hopki
Gnome
Posts: 13004
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:

Code: Select all

calc(100% -100px)
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,
Attachments
skin.ggsk
(1.02 KiB) Downloaded 127 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/
4ctive
Posts: 35
Joined: Mon Dec 16, 2019 10:07 am

That's great! I didn't know that CSS solution.

Thank you very much Hopki!
Best Regards,
Benjamin
Post Reply