Filip Phigari
Filip Phigari

Reputation: 135

Widget (Button Display) Stuck in Bottom Left Corner on UI (Python with Kivy)

Question:

How can I keep Widget (Button Display) from getting stuck in bottom left corner of UI?

Goal:

I want the button in WidgetwithButton to match the format of button in SomeScreen. Instead, it is stuck in bottom left corner, barely visible.

Code is provided below.

Python Code:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition

class ScreenManagement(ScreenManager):
    pass

class AnotherScreen(Screen):
    pass

class MainScreen(Screen):
    pass

class WidgetwithButton(Widget):
    pass

presentation = Builder.load_file("buttonformatexample.kv")

class MainApp(App):
    def build(self):
        return presentation

if __name__ == "__main__":
    MainApp().run()

KV Code:

#: import FadeTransition kivy.uix.screenmanager.FadeTransition

ScreenManagement:
    transition: FadeTransition()
    MainScreen:

<WidgetwithButton>:
    Button:
        text: "stuff"
        font_size: 30
        size_hint: 0.25, 0.1
        pos_hint: {"x":0, "top": 0.69}
<MainScreen>:
    WidgetwithButton:    
    FloatLayout:    
        Button:
            text: "stuff"
            font_size: 30
            size_hint: 0.25, 0.1
            pos_hint: {"x":0, "top": 0.8}

Output:

Output:

Note:

Bottom left 'stuff' should ideally be same size as above button, and slightly under it (as pos_hint code suggests)

Upvotes: 0

Views: 1422

Answers (1)

Tshirtman
Tshirtman

Reputation: 5949

WidgetWithButton is a subclass of Widget so it doesn't do anything with size_hint and pos_hint (which is for layouts, and each layout uses slightly differently), you might want to make it inherit from FloatLayout instead, if you want the same behavior. Alternatively, you could use pos and size instead of pos_hint and size_hint.

<WidgetwithButton>:
    Button:
        text: "stuff"
        font_size: 30
        # size_hint: 0.25, 0.1
        # the following line will emulate that size_hint without the need of a layout
        size: root.width * 0.25, root.height * 0.1

        # pos_hint: {"x":0, "top": 0.69}
        # the following two lines will emulate the same effect without the need of a layout
        x: root.x
        top: self.height and root.y + root.height * 0.69

Upvotes: 1

Related Questions