DropDown out of view if item is in scrollable

[JL710]

I displayed some stuff in a scrollable. I added a dropdown for each item in the list that adds the option to do edits. It opens a dropdown left next to the item.

It works fine if the item is always visible. But if it is a item that I first need to scroll to, the popup is at first visible and for each item it gets further down until it is invisible.

I do not have a minimal code example at the moment.

[JL710]

I got some test code together:

#[derive(Debug, Clone)]
enum Message {}

#[derive(Default)]
struct App {}

impl App {
    fn update(&mut self, message: Message) -> iced::Task<Message> {
        iced::Task::none()
    }

    fn view(&self) -> iced::Element<Message> {
        iced::widget::scrollable(
            iced::widget::column![
                "a\na\na\na\na\na\na\na\nasd",
                iced_aw::widgets::DropDown::new("underlay", "overlay", true),
                "a\na\na\na\na\na\na\na\n"
            ]
            .width(iced::Fill),
        )
        .into()
    }
}

fn main() {
    iced::run("Test", App::update, App::view).unwrap();
}

You can reproduce it when you scale the window vertically. If you make it smaller then the content of the column and you scroll the overlay stays at the original place but the underlay moves.

If you make the window vertically small enough that the overlay disappears, you can still view the overlay when scrolling but the underlay stays invisible.

I think the issue relies in the dropdown not being aware of the position on the screen but only the one in the large scrollable area.

[genusistimelord]

ahh yeah, probably need to figure out how to add in the offsets of scrolling. IF you want to try and Tackle the issue We accept PR's

[spantaleev]

I'm also experiencing this issue.

---

I've managed to make things a little better (but not quite perfect), by manually adjusting the DropDown's offset to match the scrollable's position.

Here's some sample pseudo-like code (not quite accurate, since the dropdown lives in widgets that are inside the scrollable and the scroll_offset_y state value needs to be passed down the widget hierarchy), but you hopefully get the idea:

# .....

let scrollable = scrollable(widget_list);
    .on_scroll(|viewport| {
        Message::Scroll(viewport)
    });

# .....

match message {
    Message::Scroll(viewport) => {
        self.state.scroll_offset_y = viewport.absolute_offset().y;
    }
}

let mut dropdown = build_dropdown();
dropdown = dropdown.offset(iced_aw::drop_down::Offset::from(-scroll_offset_y + 5.0));

---

With this workaround:

• ✅ The dropdown is nicely positioned 5px below the underlay button that triggers the dropdown
• ❌ For dropdown-trigger buttons which require scrolling to be visible, the button that triggers the dropdown cannot be clicked to close the dropdown anymore. Clicking anywhere else makes the dropdown close, but the button itself not working is problematic

I have not figured out how to solve the latter. It's quite a bad usability issue, so despite half the trouble being worked-around here, dropdowns are still not usable in a scrollable.

[JL710]

Interestingly that does not happen with the default tooltip widget.

[JL710]

I seems that it is this line (https://github.com/iced-rs/iced/blob/master/widget/src/tooltip.rs#L291) that is different in the tooltip that causes the issue in the drop down (https://github.com/iced-rs/iced_aw/blob/main/src/widget/drop_down.rs#L217).