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

Positioning of MDTopAppBar elements #2 #1700

Open
AHiXilTOr opened this issue May 29, 2024 · 8 comments
Open

Positioning of MDTopAppBar elements #2 #1700

AHiXilTOr opened this issue May 29, 2024 · 8 comments
Labels
Type: Bug Bug report/Bug fix

Comments

@AHiXilTOr
Copy link

Description of the Bug

pos_hint: {"center_x": .5} doesn't work

Code and Logs

from kivymd.app import MDApp
from kivy.lang import Builder

kv = """
MDScreen:
    md_bg_color: self.theme_cls.secondaryContainerColor

    MDTopAppBar:
        type: "small"
        size_hint_x: .8
        pos_hint: {"center_x": .5, "center_y": .5}

        MDTopAppBarLeadingButtonContainer:

            MDActionTopAppBarButton:
                icon: "menu"

        MDTopAppBarTitle:
            text: "AppBar small"
            pos_hint: {"center_x": .5}

        MDTopAppBarTrailingButtonContainer:

            MDActionTopAppBarButton:
                icon: "account-circle-outline"
"""

class App(MDApp):
    def build(self):
        return Builder.load_string(kv)

App().run()
"""


class MainApp(App):
    def build(self):
        self.root = Builder.load_string(kv)


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

Screenshots

333584429-86ae5ae8-2665-48a5-8985-04b59746f130

Versions

  • OS: Any
  • Python: Any
  • Kivy: Any
  • KivyMD: dev
@HeaTTheatR HeaTTheatR added the Type: Bug Bug report/Bug fix label May 29, 2024
@T-Dynamos
Copy link
Collaborator

T-Dynamos commented May 29, 2024

What is the use case of centering that icon?

It does not matches material design spec.

https://m3.material.io/components/top-app-bar/specs

(It does not declare anywhere to center icons)

@AHiXilTOr
Copy link
Author

AHiXilTOr commented May 29, 2024

What is the use case of centering that icon?

It does not matches material design spec.

https://m3.material.io/comComponents/top-app-bar/specs

(It does not declare anywhere to center icons)

Not an icon, but a title.

@WangZhongDian
Copy link

I also encountered the same problem

2 similar comments
@nattokukun
Copy link

I also encountered the same problem

@jporta09
Copy link

I also encountered the same problem

@theolaos
Copy link

I also encountered the same problem

The problem seems to happen only when you try to center align the title. If you remove the alignment (pos_hint: {"center_x": .5}) Then everything works fine.

@nattokukun
Copy link

I see
solved.
thank you very much.

@MaxSavenkov
Copy link

I also face the same issue, and removing "pos_hint: {"center_x": .5}" does not help. However, the problem goes away if I update the text from code, or resize window. It seems the problem is in some order of updates.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Bug report/Bug fix
Projects
None yet
Development

No branches or pull requests

8 participants