Search code examples
labelalignmentkivytextinput

Label and Textinput Alignment Struggle


I would like to align the Labels on the left to be right justified and the corresponding items (label text and textinput) on the right side justified to the left so visually the screen presents better.

session input screen

Below is the kv code for the screen:

<SessionInput>:
    name: 'sessionInput'
    BoxLayout:
        spacing: 5
        padding: 5, 5, 0, 5
        canvas.before:
            Color:
                rgba: 0, 0, 1, 1  # blue
            Rectangle:
                pos: self.pos
                size: self.size

        orientation: 'vertical'

        Label:
            id: sessionScreen
            text: 'Session Input Screen'

        GridLayout:
            cols: 2
            Label: 
                id: foodCatLabel
                text: "Selected Food Category: "
            Label:
                id: foodCat
                text: root.foodCategory
            Label:
                id: cutNameLabel
                text: "Selected Cut: "
            Label:
                id: cutName
                text: root.cutName
            Label:
                id: cutWeightLabel
                text: 'Cut Weight:'
            TextInput:
                text: 'Enter cut weight'
                id: cutWeight

            Label:
                id: grillTempLabel
                text: 'Target Grill Temp:'
            TextInput:
                text: 
                id: grillTemp

            Label:
                id: foodTempLabel
                text: 'Target Food Temp:'
            TextInput:
                text: root.foodTemp
                id: foodTemp

            Label: 
                id: prepNoteLabel
                text: 'Food Prep Notes:'
            TextInput:
                text:
                id: prepNote
                multiline: True

        Button:
            text: 'Preview'
            pos_hint: {"center_x": .5, "center_y": .5}
            size_hint: None, None
            size: 75, 50

            on_press: 
                root.manager.get_screen('sessionPreview').Preview(foodCat.text, cutName.text,
                cutWeight.text, grillTemp.text, foodTemp.text, prepNote.text)

        Widget:

I've included an image of the screen as it currently is displayed.


Solution

  • In your Labels (in the kv), you can add:

                text_size: self.size
                halign: 'right'
                valign: 'center'
    

    This sets the size of the box where the Label text is drawn, and allows the halign and valign to atually have an effect.