Search code examples
kivyscrollview

Kivy ScrollView with two Labels and simultaneously scrolling?


I have created a UI that displays two labels with long text in the lower area. Both labels are in a separate scrollview and therefore scrollable. How can I combine both labels into a single scrollview so that both labels are scrollable at the same time? Do I need to create another Layout around a Scrollview?

Here is my kv:

<Button>:
    font_size: 20
    color: 0.1,0.5,0.6,1
    size_hint: 0.3,0.1

<Label>:
    size_hint: 0.1,0.1

<TextInput>:
    size_hint: 1,0.1

<PopupBox>:
    size_hint: .2, .15
    auto_dismiss: True
    title: 'Please wait'
    Label:
        pos_hint: {"x":0.5, "top":0.7}
        text: 'Creating the data...'

<FloatLayout>:
    canvas:
        Color:
            rgba: 0.15, 0.15, 0.15, 0.15
        Rectangle:
            size: self.size
            pos: self.pos

    Label:
        text: "Label 1"
        size_hint: 0.1,0.1
        pos_hint: {"x":0.0, "top":1}

    TextInput:
        id: input1
        pos_hint: {"x":0.11, "top":1}
        multiline: True

    Label:
        text: "Label 2"
        size_hint: 0.1,0.1
        pos_hint: {"x":0.0, "top":0.9}

    TextInput:
        id: input2
        pos_hint: {"x":0.11, "top":0.9}
        multiline: True

    Label:
        text: "Label 3"
        size_hint: 0.11, None
        pos_hint: {"x":0, "top":0.8}
        height: 30

    TextInput:
        id: input3
        text: "|"
        pos_hint: {"x":0.11, "top":0.8}
        size_hint: 0.03, None
        height: 30

    Button:
        text: "Clear"
        on_press: app.clear_inputs()
        pos_hint: {"x":0.15, "top":0.8}
        size_hint: 0.1, None
        height: 30

    Label:
        id: dd_label
        text: "dd"
        pos_hint: {"x":0.7, "top":0.8}
        size_hint: 0.1, None
        height: 30

    Button:
        text: "Comp"
        on_press: app.start_second_thread()
        pos_hint: {"x":0, "top":0.76}
        size_hint: 1, None
        height: 50

    Button:
        text: "So"
        on_press: app.show_popup()
        pos_hint: {"x":0, "top":0.69}
        size_hint: 0.1, None
        height: 25

    GridLayout:
        cols: 2
        size_hint: 1, 0.67
        ScrollView:
            size_hint: (1, 1)
            bar_width: 10
            bar_color: 0.1, 0.1, 0.1, 0.1
            bar_inactive_color: 0.15, 0.15, 0.15, 0.15
            effect_cls: "ScrollEffect"
            scroll_type: ['bars']

            Label:
                id: f_output1
                text: "long text1 \n" * 100
                size_hint_y: None
                size_hint_x: 0.7
                size: self.texture_size
                pos_hint: {"x":0.6, "top":0.7}
                markup: True
                text_size: 700, None
                valign: "middle"
                halign: 'right'
                padding_x: 5

        ScrollView:
            size_hint: (1, 1)
            bar_width: 10
            bar_color: 0.1, 0.1, 0.1, 0.1
            bar_inactive_color: 0.15, 0.15, 0.15, 0.15
            effect_cls: "ScrollEffect"
            scroll_type: ['bars']

            Label:
                id: f_output2
                text: "long text2 \n" * 100
                size_hint_y: None
                size_hint_x: 1
                size: self.texture_size
                pos_hint: {"x":0.6, "top":0.7}
                text_size: 600, None
                markup: True

Solution

  • You can make a single ScrollView and make create a GridLayout with cols:2 for 2 labels

    ScrollView:
        size_hint: (1, 1)
        bar_width: 10
        bar_color: 0.1, 0.1, 0.1, 0.1
        bar_inactive_color: 0.15, 0.15, 0.15, 0.15
        effect_cls: "ScrollEffect"
        scroll_type: ['bars']
        GridLayout:
            cols: 2
            size_hint_y:None
            height:self.minimum_height
            Label:
                id: f_output1
                text: "long text1 \n" * 100
                size_hint_y: None
                size_hint_x: 0.7
                size: self.texture_size
                pos_hint: {"x":0.6, "top":0.7}
                markup: True
                text_size: 700, None
                valign: "middle"
                halign: 'right'
                padding_x: 5
    
            Label:
                id: f_output2
                text: "long text2 \n" * 100
                size_hint_y: None
                size_hint_x: 1
                size: self.texture_size
                pos_hint: {"x":0.6, "top":0.7}
                text_size: 600, None
                markup: True