egui::Grid not allowing widgets to scale.

[Jonne-G]

Hi all,

I'm trying to make an input dialogue using the egui::Grid layout as a means to keep all the widgets aligned.
The problem is, that somehow the TextEdit is not properly resizing.

This is roughly the code I'm using to achieve this:

Grid::new("my_grid").show(ui, |ui| {
    ui.label("1st Executable");
    ui.text_edit_singleline(&mut path_1);
    ui.button("icon");
    ui.end_row();

    ui.label("2nd Executable");
    ui.text_edit_singleline(&mut path_2);
    ui.button("icon");
    ui.end_row();

    ui.separator();
    ui.end_row();

    ui.label("Install Directory");
    ui.text_edit_singleline(&mut path_3);
    ui.button("icon");
    ui.end_row();
});

As well as the visuals it produces:

I have tried using the .desired_width() method on the TextEdit to force it to a certain size, but even then it still stays miniscule.
To add the desired width, this is what I tried using:

ui.label("1st Executable");

// I have tried with both infinity, and just a high value, neither seem to work.
let edit = TextEdit::singleline(&mut path_1).desired_width(f32::INFINITY);
ui.add(edit);

ui.button("icon");
ui.end_row();

[emilk]

I created an issue for this: #4694

[Jonne-G]

Thank you!
I'll use the solution suggested by @YgorSouza for now.

[YgorSouza]

There are plans to improve layout for these kinds of cases, but one way to make this work with the current version of egui is to use add_sized to set the size of the first row, and then the other rows will follow (as long as the default size is large enough).

let text_width = 200.0;
ui.spacing_mut().text_edit_width = text_width;
egui::Grid::new("my_grid").show(ui, |ui| {
    ui.label("Short");
    let mut size = ui.spacing().interact_size;
    size.x = text_width;
    ui.add_sized(size, |ui: &mut egui::Ui| {
        ui.text_edit_singleline(&mut self.name)
    });
    ui.button("icon");
    ui.end_row();

    ui.label("Longer string");
    ui.text_edit_singleline(&mut self.name);
    ui.button("icon");
    ui.end_row();

    ui.separator();
    ui.end_row();

    ui.label("Install Directory");
    ui.text_edit_singleline(&mut self.name);
    ui.button("icon");
    ui.end_row();
});

But getting it to resize to fill all the available space is more complicated, because the Grid is also doing the same thing for the entire row, and it creates a conflict. It would look somewhat like this, but this doesn't quite work with the Grid:

Details

let text_width = ui
    .data(|data| data.get_temp("text_width".into()))
    .unwrap_or(200.0f32);
ui.spacing_mut().text_edit_width = text_width;
egui::Grid::new("my_grid").show(ui, |ui| {
    ui.label("Short");
    let mut size = ui.spacing().interact_size;
    size.x = text_width;
    ui.add_sized(size, |ui: &mut egui::Ui| {
        ui.text_edit_singleline(&mut self.name)
    });
    ui.button("icon");
    let next_width = text_width + ui.max_rect().right() - ui.min_rect().right();
    ui.data_mut(|data| data.insert_temp("text_width".into(), next_width));
    ui.end_row();

    ui.label("Longer string");
    ui.text_edit_singleline(&mut self.name);
    ui.button("icon");
    ui.end_row();

    ui.separator();
    ui.end_row();

    ui.label("Install Directory");
    ui.text_edit_singleline(&mut self.name);
    ui.button("icon");
    ui.end_row();
});

[Jonne-G]

Until the issue gets resolved, this should be a good solution, thank you for your help!