reflex icon indicating copy to clipboard operation
reflex copied to clipboard

I can't change width on popover

Open jcardosorios opened this issue 1 year ago β€’ 3 comments

Describe the bug When I open a popover with a image, it is wider than I expect and I can't fix it

To Reproduce

class PhotoState(rx.State):
    pic_number: int = 1

    def change_pic(self):
        if self.pic_number == 3:
            self.pic_number = 1
        else:
            self.pic_number += 1

def header_title() -> rx.Component:
    return rx.box(
        rx.popover.root(
            rx.popover.trigger(
                rx.box(
                    rx.text(
                        "Joaquin",
                        as_='span',
                        style= {'color':Color.PRIMARY.value},
                        on_click=PhotoState.change_pic
                    ),
                    f" Cardoso",
                    style=header_title_styles,
                    
                ),
            ),
            rx.popover.content(
                rx.box(
                    rx.image(src=f'me/{PhotoState.pic_number}.jpg', width='70px', height='auto', border_radius='10%'),
                ),
                width='70px'
            ),
            direction='rtl',
            width='70px'
        ),
        rx.list('Estudiante de Ciencia de Datos', style=header_tags_style),
        rx.list('Analista Programador', style=header_tags_style),
        rx.list('Licenciado en Ciencias de la Ingenieria', style=header_tags_style),
        rx.list('Alma errante', style=header_tags_style),
        style={'width':'100%'}
    )

Expected behavior The width of the popover should be the same than the image

Screenshots image

Specifics (please complete the following information):

  • Python Version: 3.10.12
  • Reflex Version: 0.5.2a1
  • OS: Windows 11
  • Browser (Optional): Chrome

jcardosorios avatar May 30 '24 23:05 jcardosorios

have you tried removing style={'width':'100%'} from the rx.popover.root?

masenf avatar May 31 '24 00:05 masenf

I tried, and it doesn't change

jcardosorios avatar May 31 '24 01:05 jcardosorios

I can reproduce the issue.

For some reason the content popover size is delimited by ... the popover.trigger width, and completely ignore the width set in popover.content.

I'm wondering if it's isn't a radix theme bug πŸ€”

Lendemor avatar May 31 '24 13:05 Lendemor