[Question] why bottom app sheet lose width???

[OmarBelfeki]

Question

why bottom app sheet lose width???

Screen.Recording.2024-11-30.092240.online-video-cutter.com.mp4

Code sample

ft.Container(
                        width=220, height=64,
                        border_radius=ft.border_radius.all(value=20),
                        bgcolor=ft.Colors.WHITE,
                        content=ft.Row(
                            vertical_alignment=ft.CrossAxisAlignment.CENTER,
                            alignment=ft.MainAxisAlignment.CENTER,
                            controls=[
                                ft.Text(
                                    value="Forecast report",
                                    size=18,
                                    font_family="overpass",
                                    weight=ft.FontWeight.W_400,
                                    color="#444E72"
                                ),
                                ft.Image(src="/icons/up.png")
                            ]
                        ),
                        on_click=lambda e: e.page.open(
                            ft.BottomSheet(
                                show_drag_handle=True,
                                bgcolor=ft.Colors.WHITE,
                                elevation=0.5,
                                content=Notif(page)
                            )
                        )
                    )

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

Does this happen with the code from the doc examples too?

[OmarBelfeki]

no, the doc example it's ok , you can add width to bottom sheet bar?

[ndonkoHenri]

Ok, will be nice if you could come up with some reproducible code for the issue so we can test.

[OmarBelfeki]

content of the bottom sheet

class Notif(ft.Container): def __init__(self, page: ft.Page) -> None: super().__init__()

    self.padding = ft.padding.only(left=20, right=20)
    self.border_radius = ft.border_radius.only(top_right=30, top_left=30)
    self.bgcolor = ft.Colors.WHITE

    self.content = ft.Column(
        width=page.width,
        controls=[
            ft.Text( # 0
                value="Your notification",
                font_family="overpass",
                size=25,
                color="#444E72",
                weight=ft.FontWeight.W_900,
                style=ft.TextStyle(
                    shadow=[
                        ft.BoxShadow(
                            blur_radius=50,
                            offset=(-4, 8),
                            color=ft.Colors.with_opacity(opacity=0.1, color=ft.Colors.BLACK),
                        ),
                        ft.BoxShadow(
                            blur_radius=6,
                            offset=(2, -3),
                            color=ft.Colors.with_opacity(opacity=0.25, color=ft.Colors.BLACK),
                            blur_style=ft.ShadowBlurStyle.INNER
                        ),
                        ft.BoxShadow(
                            blur_radius=4,
                            offset=(-6, 4),
                            color=ft.Colors.with_opacity(opacity=0.25, color=ft.Colors.WHITE),
                            blur_style=ft.ShadowBlurStyle.INNER
                        )
                    ]
                )
            ),
            ft.Divider(height=5, color=ft.Colors.TRANSPARENT), # 1
            ft.Text(  # 2
                value="New",
                color="#444E72",
                size=13,
                weight=ft.FontWeight.W_300,
            ),
            ft.Container( # 3
                data="1",
                content=ft.Row(
                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                    controls=[
                        #ft.Container(image_src="/icons/sun.png", width=24, height=24, bgcolor="red"),
                        ft.Icon(name=ft.Icons.SUNNY, color="#444E72"),
                        ft.Column(
                            controls=[
                                ft.Text(
                                    value="10 minutes ago",
                                    color="#444E72",
                                    font_family="overpass",
                                    size=13,
                                    weight=ft.FontWeight.W_400,
                                ),
                                ft.Text(
                                    value="A sunny day in your location, consider \nwearing your UV protection",
                                    color="#444E72",
                                    font_family="overpass",
                                    size=13,
                                    weight=ft.FontWeight.W_700,
                                ),
                            ]
                        ),
                        ft.Icon(name=ft.Icons.KEYBOARD_ARROW_DOWN, color="#444E72")
                    ]
                ),
                on_click=self.selected
            ),
            ft.Divider(height=5, color=ft.Colors.TRANSPARENT), # 4
            ft.Text( # 5
                value="Earlier",
                color="#444E72",
                size=13,
                weight=ft.FontWeight.W_300,
            ),
            ft.Container( # 6
                data="2",
                content=ft.Row(
                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                    controls=[
                        ft.Icon(name=ft.Icons.WIND_POWER, color=ft.Colors.with_opacity(opacity=0.7, color="#444E72")),
                        ft.Column(
                            controls=[
                                ft.Text(
                                    value="1 day ago",
                                    color=ft.Colors.with_opacity(opacity=0.7, color="#444E72"),
                                    font_family="overpass",
                                    size=13,
                                    weight=ft.FontWeight.W_400,
                                ),
                                ft.Text(
                                    value="A cloudy day will occur all day long, \ndon't worry about the heat of the sun",
                                    color=ft.Colors.with_opacity(opacity=0.7, color="#444E72"),
                                    font_family="overpass",
                                    size=13,
                                    weight=ft.FontWeight.W_700,
                                ),
                            ]
                        ),
                        ft.Icon(name=ft.Icons.KEYBOARD_ARROW_DOWN, color=ft.Colors.with_opacity(opacity=0.7, color="#444E72"))
                    ]
                ),
                on_click=self.selected
            ),
            ft.Container( # 7
                data="3",
                content=ft.Row(
                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                    controls=[
                        ft.Icon(name=ft.Icons.CLOUD_OUTLINED, color=ft.Colors.with_opacity(opacity=0.7, color="#444E72")),
                        ft.Column(
                            controls=[
                                ft.Text(
                                    value="2 day ago",
                                    color=ft.Colors.with_opacity(opacity=0.7, color="#444E72"),
                                    font_family="overpass",
                                    size=13,
                                    weight=ft.FontWeight.W_400,
                                ),
                                ft.Text(
                                    value="Potential for rain today is 84%, don't \nforget to bring your umbrella.",
                                    color=ft.Colors.with_opacity(opacity=0.7, color="#444E72"),
                                    font_family="overpass",
                                    size=13,
                                    weight=ft.FontWeight.W_700,
                                ),
                            ]
                        ),
                        ft.Icon(name=ft.Icons.KEYBOARD_ARROW_DOWN, color=ft.Colors.with_opacity(opacity=0.7, color="#444E72"))
                    ]
                ),
                on_click=self.selected
            )
        ]
    )

@staticmethod
def selected(e: ft.ControlEvent) -> None:
    if e.control.content.controls[0].color == "#444E72":
        e.control.content.controls[0].color = ft.Colors.with_opacity(opacity=0.7, color="#444E72")
        e.control.content.controls[1].controls[0].color = ft.Colors.with_opacity(opacity=0.7, color="#444E72")
        e.control.content.controls[1].controls[1].color = ft.Colors.with_opacity(opacity=0.7, color="#444E72")
        e.control.content.controls[2].color = ft.Colors.with_opacity(opacity=0.7, color="#444E72")
    else:
        e.control.content.controls[0].color = "#444E72"
        e.control.content.controls[1].controls[0].color = "#444E72"
        e.control.content.controls[1].controls[1].color = "#444E72"
        e.control.content.controls[2].color = "#444E72"
    e.control.update()