How to remove the white border located to the right of the left-drawer element

[lucasli0121]

code like below:

ui.add_css('''
    .custom-tabs .q-tab__indicator {
        display: none !important; 
    }
    .custom-tabs .q-tab__label {
        font-size: 20px !important;
        color: #ffff !important; 
    }
    
    .custom-tabs .q-tab--active,
    .custom-tabs .q-tab.q-tab--active,
    .custom-tabs .q-tab[aria-selected="true"] {
        background-color: #449DEE !important;
    }
    .custom-tabs {
        width: 100% !important;
    }
    
    .q-page {
        width: 100% !important;
        background-color: #F4F9FD !important;
    }
    
    .q-drawer {
        border: none !important;
        width: 260px !important;
        background-color: #65B6FF !important;
        height: 100%;
    }
    
''')

ui.label('page-1').classes('text-black text-2xl font-bold')
with ui.header().classes('item-center place-content-between').style('background-color: white'):
    header_title = ui.label('测试').classes('place-self-center').style('font-size: 24px; color:#65B6FF')
    ui.icon('menu').classes('text-blue-500').on('click', lambda: left_drawer.toggle())

with ui.left_drawer(top_corner=True) as left_drawer:
    ui.image('/static/images/[email protected]').classes('w-[206px] h-[46px] place-self-start')

I modify .q-drawer css width: 260px, there always is a white frame between left_drawer and page.
how to fix it?

[falkoschindler]

Hi @lucasli0121,

Can you please reduce your code example to the bare minimum to reproduce the problem? This allows us (and others that might visit this discussion in the future) to recognize the problem more easily. I guess .custom-tabs and ui.header isn't needed.
Also, it would be helpful to use English language for text and comments (if they are really necessary).
Last but not least: What are you trying to do? Do you want to change the width of the drawer?

Thanks!

[lucasli0121]

Ok, I have remove comment from example code.

What I mean is, I want to change the width of left-drawer to 260px because I noticed the quastery.css file in the nickegui source code. So I directly modified the CSS.
But there is always a white border to the right of the left-drawer element.
No matter if I modify. nicegui CSS or. q-drawer, problems always exist.
But when I adjust the width of the left-draw element to 300px, the white border disappears. Why?

[lucasli0121]

My question is how to remove that white border

[evnchn]

@lucasli0121 solved it from root cause. No need CSS hack to override width using !important

TL-DR: Quasar needs to know the width. Simply set CSS is nightmare for it, and things will break. Let it know via .props("width=260")

Notice how the style padding-left: 300px; and left: 300px is set and unset when the left drawer is shown / hidden based on browser width? Yes, it is because it is Quasar setting it. This is why we need to tell Quasar what width we are setting.

Reference:

quasarframework/quasar#15148

https://quasar.dev/layout/drawer#qdrawer-api

from nicegui import ui

ui.add_css('''
    .custom-tabs .q-tab__indicator {
        display: none !important; 
    }
    .custom-tabs .q-tab__label {
        font-size: 20px !important;
        color: #ffff !important; 
    }
    
    .custom-tabs .q-tab--active,
    .custom-tabs .q-tab.q-tab--active,
    .custom-tabs .q-tab[aria-selected="true"] {
        background-color: #449DEE !important;
    }
    .custom-tabs {
        width: 100% !important;
    }
    
    .q-page {
        width: 100% !important;
        background-color: #F4F9FD !important;
    }
    
    .q-drawer {
        border: none !important;
        /* width: 260px !important; */ /* Don't set width here, it will be set in the left_drawer .props() */
        background-color: #65B6FF !important;
        height: 100%;
    }
    
''')

ui.label('page-1').classes('text-black text-2xl font-bold')
with ui.header().classes('item-center place-content-between').style('background-color: white'):
    header_title = ui.label('测试').classes('place-self-center').style('font-size: 24px; color:#65B6FF')
    ui.icon('menu').classes('text-blue-500').on('click', lambda: left_drawer.toggle())

with ui.left_drawer(top_corner=True).props("width=260") as left_drawer:
    ui.image('/static/images/[email protected]').classes('w-[206px] h-[46px] place-self-start')

ui.run()

[evnchn]

Also, I just want to be clear: It is not a border. It is not a margin. It is not a padding. It is not a gap. It is empty space.

This is because, border, margin, padding and gap are all terms you would use in CSS, and could mislead others when they try to solve the problem.

I personally recommend to say it is the above, only when you have used DevTools to inspect the layout and confirm it is indeed a border/margin/padding/gap.

Though, that didn't mislead me. I got you covered.

[lucasli0121]

Thanks very much, Actually, at first I didn't know what it was, I thought it was a border. you are right it's empty space.