egui icon indicating copy to clipboard operation
egui copied to clipboard

Grid layout breaks if it contains horizontal

Open micfong-z opened this issue 1 year ago • 2 comments

Describe the bug Grid layout show incorrect margin when ui.horizontal() is used inside as a cell.

In the following screenshot:

  • Row 1 is slightly away from the upper border of the window, and covers some parts of Row 2.
  • There is a gap between Row 2 and Row 3.
Screenshot 2023-06-01 at 22 25 12

My guess for the reason

Note: I have not checked or verified if this is the actual problem, and it is only my best guess.

Looking at the first row only, I'm thinking that egui may have pre-calculated the size of horizontal once and put Label 1 into the correct position, however egui falsely shifted the horizontal downwards as well to match the top of Label 1. This applies to the rest of the rows.

image

To Reproduce Here's the code used to reproduce the problem

egui::Window::new("Window").show(ctx, |ui| {
    egui::Grid::new("grid_test").show(ui, |ui| {
        ui.label("Label1");  
        ui.horizontal(|ui| {  
            ui.label("This is the longest label\nwith 4 lines\nthis is the 3rd line\nand the last line here.");
        });
        ui.end_row();

        ui.label("Label2");
        ui.horizontal(|ui| {  
            ui.label("This is a shorter label\nwith 2 lines only.");
        });
        ui.end_row();

        ui.label("Label3");
        ui.horizontal(|ui| {               
            ui.label("This is a long label\nwith 3 lines\nand here is the last line.");
        });
        ui.end_row();
    })
});

Expected behavior The grid layout should function as normal, with correct margins between each line.

Desktop information

  • OS: macOS Ventura 13.2.1
  • egui Version: 0.22.0

micfong-z avatar Jun 01 '23 14:06 micfong-z