Layout Margins and size_hint

[João Abrantes]

I have a Vertical Boxlayout and I want to add a few rows on it. Some with Sliders and some with a Label associated with a Checkbox. The slider rows width go all the way. The label size should be as big as it needs to be to contain all the text (but no bigger) and the checkbox should be right next to the label. I thought that doing size_hint: (None,None) was the same as saying: "be as big as you need to be but no bigger". But that's not working the label is smaller than it should be and the checkbox has some huge margins that make it be very far away from the label. How can I pull this off?

here is my example .kv file.

BoxLayout:

   orientation:'vertical'

   size_hint:(1,None)#go all the way in width  but only as far as you  need  in y

   Slider:

        size_hint:(1,None)

    BoxLayout:

        orientation: 'horizontal'

        padding: 0

        size_hint:(None,None)

        Label:

            size_hint: (None,None)

            text: 'My Label for the Checkbox'

            canvas:

                Color:

                    rgba:1,1,1,0.2

                Rectangle:

                    pos:self.pos

                    size:self.size

        CheckBox:

            size_hint: (None,None)

            canvas:

                Color:

                    rgba:1,0,0,0.2

                Rectangle:

                    pos:self.pos

                    size:self.size

    Slider:

        size_hint:(1,None)

[werton]

You misunderstood the size_hint. size_hint = (None, None) are meaning - you don’t want to use a size_hint, and wish to set width and height manually. Because of this, the size of your widgets set equal to the default value.Use the 'texture_size' to get the width of the label text.

[João Abrantes]

Thanks for the tips but how can I say for a BoxLayout to be big enough (and no bigger) to contain its children?

[werton]

You don't need to manipulate the layout size, manipulate the size of layout children.

BoxLayout:
    orientation:'vertical'
    size_hint:(1,None)#go all the way in width  but only as far as you  need  in y

    Slider:
        size_hint:(1,None)

    BoxLayout:
        orientation: 'horizontal'
        padding: 0
        size_hint:(None,None)

        Label:

            size_hint: (None,None)
            text: 'My Label for the Checkbox'

            width: self.texture_size[0]

[João Abrantes]

In this simple example I want to have a Label followed by a BoxLayer that has two buttons horizontally. As you can see there is a big margin between the layer and the buttons because the BoxLayer is bigger than its children and I have set the BoxLayer size_hint_y to None (if I would have set it to 1 it would occupy the whole screen).

BoxLayout:

    orientation:"vertical"

    canvas:

        Color:

            rgb:0.2,0.2,0.2

        Rectangle:

            pos:self.pos

            size:self.size

    Label:

        size_hint:(1,None)

        height:self.texture_size[1]

        text: "Selection Panel"

    BoxLayout:

        orientation: 'horizontal'

        size_hint:(1,None)

        canvas:

            Color:

                rgba: 1,0,0,0.2

            Rectangle:

                pos:self.pos

                size:self.size

        Button:

            size_hint:(0.7,None)

            height:50

            background_color: 1,1,1,1

            background_normal:''

        Button:

            size_hint:(0.3,None)

            height:50

            background_color: 1,0,0,1

            background_normal:''

[werton]

Like this?

AnchorLayout:
    anchor_y: 'top'

    BoxLayout:
        size_hint:(1, 50.0/root.height)

        orientation:"vertical"

        canvas:
            Color:
                rgb:0.2,0.2,0.2

            Rectangle:
                pos:self.pos
                size:self.size

        Label:
            size_hint:(1, self.texture_size[1]/float(self.parent.height))

            text: "Selection Panel"

        BoxLayout:
            orientation: 'horizontal'

            canvas:
                Color:
                    rgba: 1,0,0,0.2

                Rectangle:
                    pos:self.pos
                    size:self.size

            Button:
                size_hint:(0.7, 1)
    #            height:50
                background_color: 1,1,1,1
                background_normal:''

            Button:
                size_hint:(0.3, 1)
    #            height:50
                background_color: 1,0,0,1
                background_normal:''

[João Abrantes]

Got it! Thanks very much.