Page layout - resetting the page in Kivy / Python - python-3.x

Question

I'm just getting started with Kivy programming for Python. I'm having trouble in using the PageLayout. This is my Python Code so far (Python 3.6.2):
import kivy
from kivy.app import App
from kivy.uix.pagelayout import PageLayout
class PageApp(App):
def build(self):
return PageLayout()
paApp = PageApp()
paApp.run()
The Kivy-file (PageApp.kv) has the following content:
<PageLayout>:
canvas:
Color:
rgb: 0, .5, .95
Rectangle:
pos: self.pos
size: self.size
BoxLayout:
orientation: "vertical"
Button:
text: "This is a test button"
size_hint_y: .4
Label:
markup: True
text: "This is a [b]looooong[/b] text... "*100
color: 0, 0, 0, 1
outline_color: 0, 0.5, 0.5, 1
font_size: 30
BoxLayout:
orientation: "vertical"
Label:
markup: True
text: "This is an even [b]looooonger[/b] text... "*100
color: 0, 0, 0, 1
outline_color: 0, 0.5, 0.5, 1
font_size: 30
Button:
text: "This is a second test button"
size_hint_y: .2
Button:
text: "Page 3"
Button:
text: "Page 4"
The result looks like this: Page 1, Page 2 (after swiping)
As is visible from the screenshots, the following problems appear:
The Labels don't show.
The background is only partially in the color that I specified in the canvas-settings.
Most importantly: the page doesn't seem to reset after swiping, leading to the problem that elements from the first page remain on the page when swiping to page 2. Page 3 and 4 seem to work fine, because the buttons take the whole space...
Does anyone know how to fix these issues?

Answer 1

Please refer to the example below for details.
Question The Labels don't show.
Answer The two Labels did show up but as black labels because you have exceeded the text size.
In page 1, I have changed the multiplication value from 100 to 49. Anything 50 and above, you will see a black label.
In page 2, I have removed 100. Anything between 2 and 36, the text overflowed into page 1. Anything 37 and above, you will see a black label.
Question The background is only partially in the color that I specified in the canvas-settings.
Answer The color of the canvas was not set for page 2. Therefore, it is using the color from page 1.
Question Most importantly: the page doesn't seem to reset after swiping, leading to the problem that elements from the first page remain on the page when swiping to page 2. Page 3 and 4 seem to work fine, because the buttons take the whole space...
Answer You will see border areas on the right or left hand side which is use for swiping from one page to the next.
Example
main.py
from kivy.app import App
from kivy.uix.pagelayout import PageLayout
class PageLayoutDemo(PageLayout):
pass
class TestApp(App):
title = "Kivy PageLayout Demo"
def build(self):
return PageLayoutDemo()
if __name__ == "__main__":
TestApp().run()
test.kv
#:kivy 1.10.0
<PageLayoutDemo>:
BoxLayout:
canvas:
Color:
rgb: 0, .5, .95, 1
Rectangle:
pos: self.pos
size: self.size
orientation: "vertical"
Button:
text: "This is a test button"
size_hint_y: .4
Label:
markup: True
text: "This is a [b]looooong[/b] text... " * 49
color: 0, 0, 0, 1
outline_color: 0, 0.5, 0.5, 1
font_size: 30
BoxLayout:
orientation: "vertical"
canvas:
Color:
rgba: 109/255., 8/255., 57/255., 1
Rectangle:
pos: self.pos
size: self.size
Label:
markup: True
text: "This is an even [b]looooonger[/b] text... "
color: 0, 0, 0, 1
outline_color: 0, 0.5, 0.5, 1
font_size: 30
Button:
text: "This is a second test button"
size_hint_y: .2
Button:
text: "Page 3"
Button:
text: "Page 4"
Output

Answer 2

Okay
you don't set the text_size property of the label and the text that you want to show is very long
Sorry but the background color is exactly the color that you specified in the canvas, see the image below
You can set the border property of the PageLayout if you want to reduce the size of the next/previews page in the current
If you just want a widget to swipe arround sub widgets I suggest you to use the Caroussel widget
Try the code below:
-main.py
import kivy
from kivy.app import App
from kivy.uix.pagelayout import PageLayout
class PageApp(App):
def build(self):
return PageLayout()
paApp = PageApp()
paApp.run()
-page.kv
<PageLayout>:
border: 5
BoxLayout:
canvas:
Color:
rgb: 0, .5, .95
Rectangle:
pos: self.pos
size: self.size
orientation: "vertical"
Button:
text: "This is a test button"
size_hint_y: .4
Label:
markup: True
text: "This is a [b]looooong[/b] text... " * 100
text_size: self.size
color: 0, 0, 0, 1
outline_color: 0, 0.5, 0.5, 1
font_size: 30
BoxLayout:
canvas:
Color:
rgb: 0, .5, .95
Rectangle:
pos: self.pos
size: self.size
orientation: "vertical"
Label:
markup: True
text: "This is an even [b]looooonger[/b] text... " * 100
color: 0, 0, 0, 1
outline_color: 0, 0.5, 0.5, 1
font_size: 30
text_size: self.size
Button:
text: "This is a second test button"
size_hint_y: .2
Button:
canvas.before:
Color:
rgb: 0, .5, .95
Rectangle:
pos: self.pos
size: self.size
text: "Page 3"
Button:
canvas.before:
Color:
rgb: 0, .5, .95
Rectangle:
pos: self.pos
size: self.size
text: "Page 4"
-some outputs:
proof for the background color:
I hope this helps !