Dynamic height

Troubleshooting gui
1

Hello,



is it somehow possible to make a control/element as high as the combined height of its child elements? I know you can resize the parent in your code, but is it somehow possible to make Nifty do that automatically? Like an XML attribute?

2

Nifty does do some dynamic layout stuff but I’m not 100% sure how it works. I know it does exist though.

3

If you don’t specify width or height constraints for a panel but for all child elements for this panel then Nifty tries to be smart. It will first check the size if the child elements and indeed adds them up and uses the child dimensions to size the parent element!



There are some preconditions for this to work tho:


  • the parent must not have a width or height constraint set
  • the child elements need to have absolute px values. percent values won’t work here since these are all relative to the parent and the parent does not have a width or height constraint set



    Here is an example:



    [xml] <panel childLayout=“vertical” backgroundColor="#f00f">

    <panel width=“20px” height=“50px” backgroundColor="#0f0f"/>

    <panel width=“40px” height=“50px” backgroundColor="#00ff"/>

    </panel>[/xml]



    Which will get you this image:



    http://i.imgur.com/3EZ1I.png



    Note that the red panel - the parent panel - will automatically be resized to 100px height!
4

Erm, and I’ve just discovered that this is partly broken :slight_smile: It will work correctly only for the height but not for the width when using vertical layout. Adding the element sizes together is only correct for the height but not for the width. For the width it really should be “use max width” :slight_smile:



Using horizontal layout it works correctly for the height properties (here it is already using “use max height”) but for some reason it does not support this auto calc magic for the width at all.



Well, I think I’ll be back when this is fixed :smiley: Please be careful with this feature for now :wink:

1 Like
5

That would explain my “not 100% sure” void, since I tried to do exactly what you are describing and then when it didn’t work went back to specifying everything :slight_smile:

6

I think it looks better now:



tcuqr.png821Ă—411
http://i.imgur.com/tcuqr.png



The red panel has no width/height constraint set. The width/height of each parent panel is calculated automatically by Nifty from the dimension of the child elements which all have absolute px values set for width and height. From left to right this demonstrates vertical, horizontal and center childLayout. And I’ve added some paddings and margins to make it look better.



I think this is fixed now in 1.3.2-SNAPSHOT :slight_smile:

1 Like