Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tab contents MDBoxLayout adaptive_width mis-layout. #1665

Open
RobertFlatt opened this issue Apr 2, 2024 · 2 comments
Open

Tab contents MDBoxLayout adaptive_width mis-layout. #1665

RobertFlatt opened this issue Apr 2, 2024 · 2 comments
Labels
Status: Needs analysis Issue needs to be analyzed if it's real

Comments

@RobertFlatt
Copy link

Description of the Bug

An MDBoxLayout in tabs content is mis-layedout when adaptive_width = True.
In this case the intent is for "Button in BoxLayout" to be located centrally in the space below "Button 2"

adaptive_size correctly lays out the BoxLayout if the design intent is for the layout to behave as if there is no BoxLayout.

Code and Logs

from kivy.lang import Builder
from kivy.uix.scrollview import ScrollView

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.button import MDButton, MDButtonText
from kivymd.uix.tab import (
    MDTabsItemIcon,
    MDTabsItemText,
    MDTabsItem,
)

KV = '''
MDScreen:
    md_bg_color: self.theme_cls.backgroundColor
    MDBoxLayout:
        orientation:'vertical'
        MDTabsPrimary:
            id: tabs
            pos_hint: {"center_x": .5, "center_y": .5}
            MDDivider:
            MDTabsCarousel:
                id: related_content_container
                size_hint_y: None
                height: dp(320)
        MDLabel:
            text:'Button BoxLayout has adaptive_width = True.'
            halign:'center'
'''

class Example(MDApp):
    def on_start(self):
        super().on_start()
        self.root.ids.tabs.add_widget(
            MDTabsItem(MDTabsItemText(text='A Tab')))
        
        bl = MDBoxLayout(orientation='vertical',
                         size_hint_y=None)
        bl.bind(minimum_height=bl.setter('height'))
        for i in range(3):
            bl.add_widget(MDButton(MDButtonText(text='Button '+str(i)),
                                   pos_hint={"center_x": .5, "center_y": .5}))

        bl2 = MDBoxLayout(orientation='horizontal',
                          pos_hint = {'center_x':0.5},
                          adaptive_width = True)
        bl2.add_widget(MDButton(MDButtonText(text='Button in BoxLayout'),
                                pos_hint={"center_x": .5, "center_y": .5}))
        bl.add_widget(bl2)
        
        sv = ScrollView()
        sv.add_widget(bl)
        self.root.ids.related_content_container.add_widget(sv)

    def build(self):
        self.theme_cls.primary_palette = "Olive"
        return Builder.load_string(KV)


Example().run()

Screenshots

issue5

Versions

  • OS: Windows 11
  • Python: Python 3.11.1
  • Kivy: 2.3.0
  • KivyMD: 2.0.1.dev0
@HeaTTheatR HeaTTheatR added the Status: Needs analysis Issue needs to be analyzed if it's real label Apr 2, 2024
@RobertFlatt
Copy link
Author

RobertFlatt commented Apr 3, 2024

@HeaTTheatR

The problem is the size_hint_y in the box layout at the root of the tab content.

This is a workaround for the example above, but its not a fix (see end of this post)

        bl = MDBoxLayout(orientation='vertical',
                         #size_hint_y=None)
                         )

To be clear it is unrelated to Tab, so a simpler example is:

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.button import MDButton, MDButtonText


class Example2(MDApp):

    def build(self):
        self.theme_cls.primary_palette = "Olive"
        bl = MDBoxLayout(orientation='vertical',
                         pos_hint = {'center_y':0.5},
                         size_hint_y=None)    ####### this is the cause
                         #)
        for i in range(3):
            bl.add_widget(MDButton(MDButtonText(text='Button '+str(i)),
                                   pos_hint={"center_x": .5, "center_y": .5}))

        bl2 = MDBoxLayout(orientation='horizontal',
                          pos_hint = {'center_x':0.5},
                          adaptive_width = True)
        bl2.add_widget(MDButton(MDButtonText(text='Button in BoxLayout'),
                                pos_hint={"center_x": .5, "center_y": .5}))
        bl.add_widget(bl2)
        
        return bl
    
Example2().run()

This is I think still a real issue, because the size_hint_y=None is required in the original example for ScrollView so that if for i in range(3): is for i in range(10): the content will scroll correctly. So in the original with more buttons one can have scrolling or adaptive_width but not both.

@RobertFlatt
Copy link
Author

RobertFlatt commented Apr 4, 2024

FYI typo in https://kivymd.readthedocs.io/en/latest/components/boxlayout/
image

I think last line should be width: self.minimum_width

FYI I re-designed my app to avoid the 'adaptive_width with scroll' issue (and its better!), so my priority on this one is now zero.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs analysis Issue needs to be analyzed if it's real
Projects
None yet
Development

No branches or pull requests

2 participants