Frankster
Frankster

Reputation: 689

Position Tabbed Panel Header in Kivy

I'm trying to create custom TabbedPanel to control its look and other things. But I can't seem to be able to position the panel. I have colored the strip to green in my example to illustrate this issue. I did have a look at this question but I can't seem to figure it out. Tried setting all paddings to zero but without success.

The panel is slightly offset and is slightly smaller than the strip (as illustrated by the green color). How do I change this and remove/control the padding.

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout

Builder.load_string('''

<Screen>:
    canvas.before:
        Color:
            rgba: (0.8, 0.5, 1, 1)
        Rectangle:
            size: self.size
            pos: self.pos
    background_normal: ''
    orientation: 'vertical'
    padding: 50

    CustomPanel:
        CustomPanelItem:
            Label:
                text: 'Hello there'


<CustomPanel@TabbedPanel+CustomStrip>:
    do_default_tab: False
    tab_width: self.width 
    padding: 0, 0, 0, 0


<CustomPanelHeader@TabbedPanelHeader>:
    text: 'Long Text for a Tab'
    padding: 0, 0


<CustomPanelItem@TabbedPanelItem+CustomPanelHeader>:
    text: 'Hello World Hello World Hello World'
    padding: 0, 0


<CustomStrip@TabbedPanelStrip>:
    canvas:
        Color:
            rgba: (0, 1, 0, 1) # green
        Rectangle:
            size: self.size
            pos: self.pos

''')


class Screen(BoxLayout):
    pass


class TestApp(App):

    def build(self):
        return Screen()


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

Upvotes: 0

Views: 1404

Answers (1)

ikolim
ikolim

Reputation: 16031

Question 1 - 1 px to the left

but there still seems to be 1 px to the left ...?

Root Cause - 1 px to the left

This is due to the images used by tab which is actually a Button.

Solution - 1 px to the left

Override class rule, <TabbedPanelHeader> with background_normal: '' and background_color: any rgba color

Question 2 - leg room beneath

... how do I deal with that leg room beneath?

Explanation

I believed that it could be by design that the strip / separator is there.

Questions

The panel is slightly offset and is slightly smaller than the strip (as illustrated by the green color). How do I change this and remove/control the padding.

Solution

Override the padding in class rule, <StripLayout> and remove all references to padding.

Snippets

...

<CustomPanelItem@TabbedPanelItem+CustomPanelHeader>:
    text: 'Hello World Hello World Hello World'

<StripLayout>
    padding: 0, 0, 0, 0

<TabbedPanelHeader>:
    background_normal: ''
    background_color: 0, 0, 1, 1    # blue

<CustomStrip@TabbedPanelStrip>:
    canvas:
...

Output

TabbedPanelheader - removed images StripLayout - padding

Upvotes: 1

Related Questions