Draw button inside a text box

[itsNiccoloSabatini]

Problem

hello, i have a little question about something. I'm trying to develop a login page with egui and i align the ui with

ui.vertical_centered(|ui| { ... });

and I wanna add a button to reveal and cover the password either inside or on the left of the password TextEdit::singleline. I have no idea if there's a way to put it inside and if i try to align the button on the right with

ui.horizontal(|ui| { ... });

all the line shifts back to the left side of the screen. anyone knows a way to avoid this?

Code

ui.vertical_centered(|ui| {
        ui.add_space(ui_size.space_between_widgets());
        ui.horizontal(|ui| {
            ui.add(
                TextEdit::singleline(&mut login_state.credentials.password)
                    .hint_text(
                        RichText::new("Password")
                            .size(ui_size.hint_text_size())
                            .color(if login_state.backend_error.is_some() {
                                UiColor::Error
                            } else {
                                UiColor::DarkText
                            }),
                    )
                    .password(true)
                    .min_size(vec2(ui_size.tb_x(), ui_size.tb_y()))
                    .desired_width(ui_size.tb_width())
                    .vertical_align(egui::Align::Center)
                    .font(egui::FontSelection::FontId(egui::FontId::new(
                        ui_size.tb_text_size(),
                        egui::FontFamily::Proportional,
                    )))
                    .text_color(UiColor::DarkText.into()),
            );
            ui.button("password reveal");
        });
});

Images

[Its-Just-Nans]

Hi

Maybe you can try to use a Layout https://docs.rs/egui/latest/egui/struct.Layout.html

ui.with_layout(egui::Layout::top_down_justified(egui::Align::LEFT),|ui| {
   // widgets
});

Some layout

• left_to_right
• right_to_left
• top_down
• top_down_justified
• bottom_up

[itsNiccoloSabatini]

it works only if it's pure UI, not if it's inside a ui.horizontal(...) or ui.vertical_centered(...), I've found a workaround for that that allow me to draw inside of the "box" Rect that the TextBox produces.

let rect = ui.add(TextEdit::singleline(&mut password)).rect();
draw_pwd_show_button(&rect, login_state, ui);

// To allow the show/hide password in login page.
// drows the button on the Right side of the password textbox
fn draw_pwd_show_button(rect: &egui::Rect, login_state: &mut LoginState, ui: &mut egui::Ui) {
    // to put a button inside a textbox
    let height = rect.height();
    let mut min = rect.min;
    let max = rect.max;
    min = pos2(max.x - height, min.y);
    let new_rec = egui::Rect::from_min_max(min, max);
    let show_pwd = ui
        .put(
            new_rec,
            egui::Button::image(if login_state.pwd_visibility.as_bool() {
                LocalImage::Eye.as_image()
            } else {
                LocalImage::EyeHidden.as_image()
            })
            .frame_when_inactive(true)
            .small()
            .fill(UiColor::Orange),
        )
        .on_hover_cursor(egui::CursorIcon::PointingHand);
    if show_pwd.clicked() {
        login_state.toggle_pwd_visibility();
    }
}