Skip to content

Table inside a ScrollArea starts to scroll once table origin is in the negative quadrant #49

@jccampagne

Description

@jccampagne

For context, I came across the issue while building an app with tables on a canvas.

I created a small example app here to reproduce the issue:
https://github.com/jccampagne/rs-egui-table-canvas-bug
Or refer to the function at the end of the message.

Describe the bug

Scrolling on the canvas to move the table if fine, until the table origin (top left corner) goes in the negative (x or y): at this point the content of the table starts to scrolls also. (see video below).

It looks like some offset is not properly computed?

I checked existing issues, I haven't found the exact same issue, although some might be related.

To Reproduce

Compile the example code, or use the update method pasted at the bottom of report into the template app.

Scroll the canvas around, if the table goes in the negative x-y, the table content will start to scroll as well.

The table initially show columns C0 to C9 and rows R0 to R10.

Notice there is a gap showing up after column C9, and rows R11 to R14 show up as well.

Expected behavior

Scrolling the canvas should not make the table scroll (it does not as long as the top left corner of the table is in the positive x and y which is the correct behaviour).

Screenshots

Here is a video:

scroll.table.scroll.canvas.mov

Desktop (please complete the following information):

macOS, native + safari (wasm)

Additional context

This is the bit to reproduce the behaviour

fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.heading("egui_table inside ScrollArea bug repro");
            ui.separator();

            // Outer ScrollArea — the "canvas" that is larger than the viewport.
            // The table sits inside this and should move when the canvas scrolls.
            egui::ScrollArea::both()
                .id_salt("outer_canvas")
                .show(ui, |ui| {
                    // Force the canvas to be larger than the viewport so it scrolls.
                    ui.set_min_size(egui::vec2(1200.0, 1000.0));

                    ui.label("Content above the table");
                    ui.add_space(40.0);

                    // Constrain the table so it doesn't fill the entire canvas.
                    let table_max_size = egui::vec2(500.0, 250.0);
                    egui::Frame::new()
                        .stroke(ui.visuals().widgets.noninteractive.bg_stroke)
                        .corner_radius(4.0)
                        .inner_margin(4.0)
                        .show(ui, |ui| {
                            ui.allocate_ui(table_max_size, |ui| {
                                let mut delegate = DemoTableDelegate;
                                const NUM_ROWS: u64 = 20;
                                const NUM_COLS: usize = 10;

                                egui_table::Table::new()
                                    .id_salt("demo_table")
                                    .num_rows(NUM_ROWS)
                                    .columns(vec![
                                        egui_table::Column::new(100.0)
                                            .range(50.0..=300.0)
                                            .resizable(true);
                                        NUM_COLS
                                    ])
                                    .num_sticky_cols(1)
                                    .headers([egui_table::HeaderRow::new(24.0)])
                                    .auto_size_mode(egui_table::AutoSizeMode::OnParentResize)
                                    .show(ui, &mut delegate);
                            });
                        });

                    ui.add_space(40.0);
                    ui.label("Content below the table");
                });
        });
    }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions