How to remove @ui.page padding or margin

[angelhdzmultimedia]

Code:

@ui.page('/login')
def loginPage(request: Request):
  with ui.column().classes('bg-red window-width window-height'):
    ui.button('Click')

I added the ui.column, just so I can color the background red, to see the margin of the ui.page clearly, but it also happens without the ui.column.

When I work with Vue and Quasar, I just modify the CSS of the div with the id #app, and the body, html to the CSS values of margin: 0, width: 100% and height: 100%.

When I work in Nuxt 3, they name the div with id #app, instead of id, they use a class __nuxt,
so I just add a global CSS and override the margin, widht, and height of that div.

After all that, then I add the neccessary margins. This is so that I can have full control of how QPage and QPageContainer look.

Final Words

I inspected the html in the browser, and I saw some hard-coded values. I found a div with the q-pa-md class, removed it and the margin went away. Oh and removing that padding also fixed the issue where scrollbars where showing even when adding overflow-hidden.

[falkoschindler]

To avoid the padding, you can access the content and remove the q-pa-md class as follows:

from nicegui import Client, ui

@ui.page('/')
def page(client: Client):
    client.content.classes(remove='q-pa-md')
    with ui.column().classes('bg-red window-width window-height'):
        ui.button('Click')

ui.run()

But once you have access to the client, you can also set the background color for the layout directly. This automatically fills the whole screen:

@ui.page('/')
def page(client: Client):
    client.layout.classes('bg-red')
    ui.button('Click')

See #411 for a discussion about how to set the page background color and the ongoing development of a nicer API.

[angelhdzmultimedia]

🤯🔥🤖🥶😱👻

[falkoschindler]

Not sure what this screenshot should tell us. ChatGPT does not even know NiceGUI. How should it know anything about the page decorator?

[angelhdzmultimedia]

I'm starting to get some strange vibes from you.

I'm just sharing the experience I'm having with ChatGPT to help me solve my issues while I learn nicegui, so I don't have to waste maintainer's time.

ChatGPT already helped solve many issues with nicegui, so I don't understand your absolutist affirmation that ChatGPT doesn't know anything about NIceGUI, and your questioning about why I shared this screenshot.

Can you help me understand what's happening here?

[falkoschindler]

Sorry, I didn't mean to offend you. I was just confused.
I really like ChatGPT and use it regularly to solve coding problems. It's a great way to tackle problems like this!
It's just that it has a cutoff date of September 2021 and every time I ask it replies that it doesn't know a Python library called "NiceGUI". And since the screenshot only talks about Streamlit, I didn't get the point. It combines its Streamlit knowledge with the desired API from your question, which results in plausible but invalid code. So I didn't know if it was meant to be a funny counter-example for ChatGPT's potential, a serious implementation suggestion, a follow up question maybe.
Probably one of those misunderstandings that happen with textual (or even non-verbal) communication over the internet.

[angelhdzmultimedia]

Probably one of those misunderstandings that happen with textual (or even non-verbal) communication over the internet.

Yup. A guy I used to talk with, always mentioned the "Text's Curse", how messages in text format can allow to misunderstandings, and wrong intentions. So, I apologize for being in "paranoid mode". I've been hurt by many maintainers before, also my generalized anxiety and depression doesn't help me at all.

Sorry for the late response. Appreciate all your time and energy spent in guiding me with nicegui.
It has been so fun so far and I'm promoting it heavily.

And yes, ChatGPT, it's an amazing tool for people with my condition, so the number of times we have to engage with people decreases exponentially. It has already solved me problems I thought they were impossible to solve!

It helped me create a custom decorator to override the @ui.page, so I can disable that default margin for all my pages.

🔥☕🤝😊❤ wishing you health, peace, and success.

[ariahrism]

For those coming in the future, the most elegant solution is now here:

https://nicegui.io/documentation/query#modify_default_page_padding

from nicegui import ui

ui.query('.nicegui-content').classes('p-0')

ui.run()

[mdu-adam-williamson]

Appreciated from the future