Row inside Stack is not scrolling properly when using Positioned widget (top/left)

[OmarBelfeki]

Duplicate Check

• [X] I have searched the opened issues and there are no duplicates

Describe the bug

I am using a Stack widget with a Row inside it. The Row is meant to scroll horizontally. However, the scroll functionality does not work when I position the Row using the Positioned widget with top and left properties.

If I remove the Positioned widget (i.e., without specifying top and left), the scroll works as expected.

Code sample

Code

```python self.places = ft.Row( top=315, left=25, spacing=19, scroll=ft.ScrollMode.ALWAYS, controls=[ Place( name_place=("Aîn Draham", "Jendouba"), loc_place="Jendouba, Tunisie", rate="4.8", place="3ain_drahom.jpg" ), Place( name_place=("Galite Islands", "Bizerte"), loc_place="Bizerte, Tunisie", rate="4.2", place="la-galite.jpg" ) ] ) ```

To reproduce

1. Create a Stack widget.
2. Add a Row widget inside it.
3. Use the Positioned widget to set the top and left properties.
4. Try to scroll the Row. The scroll will not work.
5. Remove Positioned or its properties, and observe that the scroll works correctly.

Expected behavior

The Row inside the Stack should scroll horizontally, even when positioned using top and left.

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

11

Flet version

last

Regression

No, it isn't

Suggestions

No response

Logs

Logs

```console [Paste your logs here] ```

Additional details

No response

[ndonkoHenri]

try setting right and bottom to 0

[OmarBelfeki]

i set , but it's still not working

[ndonkoHenri]

Ok, please share runnable code that reproduces the issue.

[OmarBelfeki]

Code

```python import flet as ft class Destination(ft.NavigationBarDestination): def __init__(self, icon: str): self.__icon = icon super().__init__() #self.label = "." self.icon = self.__icon self.bgcolor = ft.colors.TRANSPARENT #self.selected_icon = self.__icon[:self.__icon.find("_")] self.selected_icon_content = ft.Column( horizontal_alignment=ft.CrossAxisAlignment.CENTER, spacing=3, controls=[ ft.Icon(name=self.__icon[:self.__icon.find("_")]), ft.Icon(name=ft.icons.CIRCLE, color=ft.colors.RED, size=7), ] ) class Place(ft.Container): def __init__(self, name_place: tuple[str, str], loc_place: str, rate: str, place: str) -> None: self.name_place = name_place self.loc_place = loc_place self.rate = rate self.place = place super().__init__() self.width, self.height = 380-160, 330 self.bgcolor = "red" self.border_radius = ft.border_radius.all(value=20) self.shadow = ft.BoxShadow( blur_radius=40, color=ft.colors.with_opacity(opacity=0.40, color=ft.colors.BLACK), offset=ft.Offset(x=0, y=2), ) self.image_src = self.place self.image_fit = ft.ImageFit.FIT_HEIGHT self.heart = ft.Container( margin=ft.margin.only(left=165, top=14), width=44, height=44, bgcolor="#999999", border_radius=ft.border_radius.all(value=180), content=ft.Icon( name=ft.icons.FAVORITE_OUTLINE, color="#FBFBFB", ), on_click=self.clicked ) self.location = ft.Container( margin=ft.margin.only(left=15, top=170), width=190, height=75, bgcolor=ft.colors.with_opacity(opacity=0.80, color="#1D1D1D"), border_radius=ft.border_radius.all(value=15), content=ft.Column( controls=[ ft.Divider(color=ft.colors.TRANSPARENT, height=2), ft.Text( value=f" {self.name_place[0]}, ", color=ft.colors.WHITE, font_family="Roboto", weight=ft.FontWeight.W_200, spans=[ ft.TextSpan( text=self.name_place[1], style=ft.TextStyle( size=12, color="#D9D9D9", ) ) ] ), ft.Row( vertical_alignment=ft.CrossAxisAlignment.CENTER, alignment=ft.MainAxisAlignment.CENTER, spacing=2, controls=[ ft.Icon( name=ft.icons.LOCATION_ON, size=25, color="#D9D9D9" ), ft.Text( value=self.loc_place, color=ft.colors.WHITE, font_family="Roboto", weight=ft.FontWeight.W_200, size=12, ), ft.Row( spacing=-5, controls=[ ft.Icon( name=ft.icons.STAR_BORDER, color="#D9D9D9", size=14 ), ft.Text( value=self.rate, color=ft.colors.WHITE, font_family="Roboto", weight=ft.FontWeight.W_200, size=14, ) ] ) ] ) ] ) ) self.content = ft.Column( controls=[ self.heart, self.location ] ) @staticmethod def clicked(e: ft.ControlEvent) -> None: if e.control.content.name == ft.icons.FAVORITE_OUTLINE: e.control.content.name = ft.icons.FAVORITE else: e.control.content.name = ft.icons.FAVORITE_OUTLINE e.control.update() class Home(ft.View): def __init__(self): super().__init__( route="/home", padding=0, ) #self.bottom_appbar = BottomAppBar() self.navigation_bar = ft.NavigationBar( height=40, bgcolor=ft.colors.TRANSPARENT, indicator_color=ft.colors.TRANSPARENT, overlay_color=ft.colors.TRANSPARENT, label_behavior=ft.NavigationBarLabelBehavior.ONLY_SHOW_SELECTED, animation_duration=200, destinations=[ Destination(ft.icons.HOME_OUTLINED), Destination(ft.icons.TIMER_OUTLINED), Destination(ft.icons.FAVORITE_BORDER), Destination(ft.icons.PERSON_OUTLINED) ] ) self.hi = ft.Text( value="Hi, Omar👋", font_family="Montserrat", size=25, weight=ft.FontWeight.BOLD, color="#2F2F2F" ) self.explore = ft.Text( value="Explore The World", font_family="Inter", size=15, weight=ft.FontWeight.W_400, color="#888888", style=ft.TextStyle(letter_spacing=0.5) ) self.mer = ft.Column( controls=[ self.hi, self.explore ], run_spacing=9, alignment=ft.MainAxisAlignment.START ) self.avatar = ft.Container( content=ft.Image( src=r"faces\omar.png", width=100, height=80.24 * 1.2 ), width=68, height=68, bgcolor=ft.colors.RED, border_radius=180 ) self.header = ft.Row( top=34, left=26, spacing=90, controls=[ self.mer, self.avatar ], ) self.search = ft.Container( left=28, top=127, content=ft.SearchBar( width=311, height=45, expand=True, bar_bgcolor=ft.colors.WHITE, #bar_leading=ft.Icon(name=ft.icons.SEARCH, color=ft.colors.BLACK), bar_trailing=[ ft.Row( spacing=5, controls=[ ft.Image(src="icons/line.png", color="#888888", width=30, height=21.6), ft.Image(src="icons/settings.png", color="#888888", width=24, height=21.6), ft.Text(" ") ] ) ], divider_color=ft.colors.BLACK, bar_hint_text=" Search Places", ) ) self.popular_places = ft.Text( value="Popular Places", font_family="Montserrat", weight=ft.FontWeight.W_400, size=16, left=28, top=200, color=ft.colors.BLACK ) self.view_all = ft.TextButton( left=260, top=235-7-5-30, content=ft.Text( value="View all", font_family="Montserrat", weight=ft.FontWeight.W_400, size=16, color="#888888" ), ) self.most_viewed = ft.Container( top=300-7-5-40, left=28, width=115, height=49.34, bgcolor="#2F2F2F", border_radius=ft.border_radius.all(value=20), alignment=ft.alignment.center, shadow=ft.BoxShadow( blur_radius=19, color=ft.colors.with_opacity(opacity=0.19, color=ft.colors.BLACK), offset=ft.Offset(x=0, y=9) ), content=ft.Text( value="Most Viewed", color=ft.colors.WHITE, font_family="Montserrat", size=14, weight=ft.FontWeight.W_400 ), on_click=None ) self.nearby = ft.Container( top=300 - 7 - 5-40, left=self.most_viewed.width+28+15, width=105-21, height=49.34, bgcolor="#FBFBFB", border_radius=ft.border_radius.all(value=20), alignment=ft.alignment.center, content=ft.Text( value="Nearby", color="#C5C5C5", font_family="Montserrat", size=14, weight=ft.FontWeight.W_400 ), on_click=None ) self.latest = ft.Container( top=300 - 7 - 5-40, left=260, width=105 - 21, height=49.34, bgcolor="#FBFBFB", border_radius=ft.border_radius.all(value=20), alignment=ft.alignment.center, content=ft.Text( value="Latest", color="#C5C5C5", font_family="Montserrat", size=14, weight=ft.FontWeight.W_400 ), on_click=None ) self.places = ft.Row( ######################## this the error top=315, left=25, #bottom=0, right=0, # <<< not working spacing=19, scroll=ft.ScrollMode.ALWAYS, controls=[ Place( name_place=("Aîn Draham", "Jendouba"), loc_place="Jendouba, Tunisie", rate="4.8", place="3ain_drahom.jpg" ), Place( name_place=("Galite Islands", "Bizerte"), loc_place="Bizerte, Tunisie", rate="4.2", place="la-galite.jpg" ) ] ) self.controls = [ ft.Container( bgcolor=ft.colors.WHITE, width=380, height=750, content=ft.Stack( controls=[ self.header, self.search, self.popular_places, self.view_all, self.most_viewed, self.nearby, self.latest, self.places # this the row ] ) ) ] def main(page: ft.Page) -> None: page.theme_mode = ft.ThemeMode.LIGHT page.window.width = 380 page.window.height = 750 page.window.top = 1 page.window.right = 2 page.fonts = { "Lobster": "fonts/Lobster-Regular.ttf", "Roboto": "fonts/Roboto-Medium.ttf", "Montserrat": "fonts/Montserrat-VariableFont_wght.ttf", "Inter": "fonts/Inter-VariableFont_opsz,wght.ttf" } def router(route: str) -> None: page.views.clear() match page.route: case "/home": page.views.append(Home()) page.update() page.on_route_change = router page.go("/home") page.update() ft.app(target=main, assets_dir="assets") ```

[OmarBelfeki]

i solved it 😎😎😎

[OmarBelfeki]

just i add height and width to Row