How to create a kivy Popup window with a scrollable content but a fixed close button.

Tested on debian jessie, python 2.7 and kivy library 1.7.2.

The idea is to have a popup to show some large text which need to scroll but the bottom close button should remain fixed.

I create a popup object which contains a BoxLayout object. Then the BoxLayout is divided into a scollable object and a button.

The scrollable object contains a label object with the text to display.

The python code:

#!/usr/bin/env python

import kivy
kivy.require('1.0.7')

from kivy.app import App

class TestApp(App):
    pass

if __name__ == '__main__':
    TestApp().run()

The kivy file:

Popup:
    id: popup
    auto_dismiss: False

    BoxLayout:
        id: contentbox
        orientation: "vertical"

        ScrollView:
            Label:
                id: content_text
                size_hint_y: None
                height: self.texture_size[1]
                text: u"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, pellentesque molestie adipiscing vitae, aliquam at tellus. Fusce quis est ornare erat pulvinar elementum ut sed felis. Donec vel neque mauris. In sit amet nunc sit amet diam dapibus lacinia. In sodales placerat mauris, ut euismod augue laoreet at. Integer in neque non odio fermentum volutpat nec nec nulla. Donec et risus non mi viverra posuere. Phasellus cursus augue purus, eget volutpat leo. Phasellus sed dui vitae ipsum mattis facilisis vehicula eu justo.\n\n Quisque neque dolor, egestas sed venenatis eget, porta id ipsum. Ut faucibus, massa vitae imperdiet rutrum, sem dolor rhoncus magna, non lacinia nulla risus non dui. Nulla sit amet risus orci. Nunc libero justo, interdum eu pulvinar vel, pulvinar et lectus. Phasellus sed luctus diam. Pellentesque non feugiat dolor. Cras at dolor velit, gravida congue velit. Aliquam erat volutpat. Nullam eu nunc dui, quis sagittis dolor. Ut nec dui eget odio pulvinar placerat. Pellentesque mi metus, tristique et placerat ac, pulvinar vel quam. Nam blandit magna a urna imperdiet molestie. Nullam ut nisi eget enim laoreet sodales sit amet a felis.\n"
                text_size: (self.width-20), None
                line_height: 1.5
                valign: "top"

        Button:
            text: "Close"
            size_hint_y: None
            height: "40dp"
            on_press: root.dismiss()

The result:

image

-> Send a comment: Unless requested otherwise I may add it, or some extract, to this page.