Aligning a button to the right of an input field, with correct focus order

[LoganDark]

So, I have this button that I want to be to the right of a text field:

It was really annoying to get it here, I had to switch the layout direction twice in order to place something on the right side but still have something on the left take up the remaining space:

ui.with_layout(Layout::top_down_justified(Align::LEFT), |ui| {
	ui.label("Server address:");
	ui.allocate_ui_with_layout(ui.available_size() * Vec2::X, Layout::right_to_left(Align::Center), |ui| {
		ui.style_mut().wrap = Some(false);
		ui.button("Ping").clicked();
		ui.with_layout(Layout::left_to_right(Align::Center).with_main_justify(true), |ui| {
			ui.text_edit_singleline(&mut self.settings.server_addr);
		});
	})
});

The problem now is that the focus order is now incorrect. because the button is technically before the text area.

Is there any better way to do this that has correct focus order?

[JumpyLionnn]

I don't think this is the answer that you seek. But the best idea that i have to to do the layout manually.
The layout will be with a delay of 1 frame but i have used it a couple of times and it works pretty well.
You need to add the ui components from left to right and then cache the sizes of the button (ui.button().rect.size()).
You can do the caching with ui.data() and ui.data_mut() https://docs.rs/egui/latest/egui/struct.Ui.html#method.data_mut
Then every frame get the available width using ui.available_width() then calculate the input width, add the input, the button and recache the button width.

ui.horizontal(|ui| {
    let previous_button_width = ui.data(|data| data.get_temp(id)).unwrap_or(egui::vec2(100.0, 0.0)).x;
    let input_width = ui.available_width() - ui.spacing().item_spacing.x - previous_button_width;
    ui.add(egui::TextEdit::singleline(&mut text).min_size(input_width * egui::Vec2::X));
    let res = ui.button("Ping");
    if res.clicked() {
        // ...
    }
    ui.data_mut(|data| data.insert_temp(id, res.rect.size()));
});

[toymil]

Hi, I implemented this idea in another way: #3908 (comment)

Which doesn't require you to account for spacing or other widget's width, so imo it's cleaner and more scalable.

[YgorSouza]

I came up with this, in case someone finds it easier:

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.heading("Fill available space");
            ui.add(egui::Slider::new(&mut self.ratio, 0.1..=0.9).text("ratio"));
            let ratio = self.ratio;
            ui.horizontal(|ui| {
                ui.label("Your name: ");
                let spacing_id = Id::new("name_input");
                let previous: f32 = ui.memory(|mem| mem.data.get_temp(spacing_id).unwrap_or(0.0));
                let available = ui.available_width() - previous;
                ui.add(TextEdit::singleline(&mut self.name).desired_width(available * ratio));
                let mut next = 0.0;
                let cursor = ui.min_rect().right();
                ui.label(format!("{} - label", self.name));
                next += ui.min_rect().right() - cursor;
                ui.add(
                    TextEdit::singleline(&mut self.name).desired_width(available * (1.0 - ratio)),
                );
                let cursor = ui.min_rect().right();
                ui.button(format!("{} - button", self.name));
                next += ui.min_rect().right() - cursor;
                next += ui.spacing().item_spacing.x;
                ui.memory_mut(|mem| mem.data.insert_temp(spacing_id, next));
            });
        });
    }
}

You only need to store one f32 in memory, corresponding to the total width taken by the fixed size widgets, which you can get by adding up the deltas of the layout cursor as you place them. You do have to add the item spacing at the end to account for the right margin. Then you subtract this width from the total available width, and split the remaining space between the variable size widgets.

Screencast.from.2024-01-28.21-10-16.webm

[toymil]

Why not just use ui.min_rect().width() - te_1.rect.width() - te_2.rect.width() for the width of all other widgets plus spacing?

That way you don't need to manually track width of fixed size widgets, or add spacing to account for margin. Which means you don't have to intermix widget code and layout code.

ui.heading("Fill available space");
ui.add(egui::Slider::new(&mut self.ratio, 0.1..=0.9).text("ratio"));
ui.horizontal(|ui| {
    let spacing_id = Id::new("name_input");
    let previous: f32 = ui.memory(|mem| mem.data.get_temp(spacing_id).unwrap_or(0.0));
    let available = ui.available_width() - previous;

    ui.label("Your name: ");
    let te_1 = ui.add(TextEdit::singleline(&mut self.name).desired_width(available * self.ratio));
    ui.label(format!("{} - label", self.name));
    let te_2 = ui.add(TextEdit::singleline(&mut self.name).desired_width(available * (1.0 - self.ratio)));
    ui.button(format!("{} - button", self.name));

    ui.memory_mut(|mem| {
        mem.data.insert_temp(
            spacing_id,
            ui.min_rect().width() - te_1.rect.width() - te_2.rect.width(),
        );
    });
});

[YgorSouza]

I guess that's cleaner. Actually, I think we might not need to track any widget sizes at all. We can just add the over/underflow to the previous value.

egui::CentralPanel::default().show(ctx, |ui| {
    ui.heading("Fill available space");
    ui.add(egui::Slider::new(&mut self.ratio, 0.1..=0.9).text("ratio"));
    let ratio = self.ratio;
    ui.horizontal(|ui| {
        let spacing_id = ui.auto_id_with("name_input");
        let total = ui.available_width();
        let flexible = ui
            .data(|data| data.get_temp(spacing_id))
            .unwrap_or(total / 2.0);

        ui.label("Your name: ");
        ui.add(TextEdit::singleline(&mut self.name).desired_width(flexible * ratio));
        ui.label(format!("{} - label", self.name));
        ui.add(
            TextEdit::singleline(&mut self.name).desired_width(flexible * (1.0 - ratio)),
        );
        ui.button(format!("{} - button", self.name));

        let next = flexible + total - ui.min_rect().width();
        ui.data_mut(|data| data.insert_temp(spacing_id, next));
    });
});