How to set margins or indents in egui?

Question

I am using a custom window in EGUI with Rust and have been quite impressed with the rust language and this gui library, but have hit a brick wall with something that I would think should be fairly straightforward. How do I indent the labels in this code?

#[derive(Default)]
pub struct VulnerabilityWindow {
    this_vuln:  Vulnerability,
}

impl eframe::App for VulnerabilityWindow {
    fn clear_color(&self, _visuals: &egui::Visuals) -> egui::Rgba {
        egui::Rgba::TRANSPARENT // Make sure we don't paint anything behind the rounded corners
    }

    fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
        let text_color = ctx.style().visuals.text_color();
        // Height of the title bar
        let height = 28.0;
        CentralPanel::default()
            .frame(Frame::none())            
            .show(ctx, |ui| {
            let rect = ui.max_rect();
            let painter = ui.painter();
            // Paint the frame:
            painter.rect(
                rect.shrink(1.0),
                10.0,
                ctx.style().visuals.window_fill(),
                Stroke::new(1.0, text_color),
            );

            // Paint the title:
            painter.text(
                rect.center_top() + vec2(0.0, height / 2.0),
                Align2::CENTER_CENTER,
                //title,
                "SysRisk - VRM - Vulnerability Input",
                FontId::proportional(height * 0.8),
                text_color,
            );

            // Paint the line under the title:
            painter.line_segment(
                [
                    rect.left_top() + vec2(2.0, height),
                    rect.right_top() + vec2(-2.0, height),
                ],
                Stroke::new(1.0, text_color),
            );

            // Add the close button:
            let close_response = ui.put(
                Rect::from_min_size(rect.left_top(), Vec2::splat(height)),
                Button::new(RichText::new("❌").size(height - 4.0)).frame(false),
            );
            if close_response.clicked() {
                frame.close();
            }

            // Interact with the title bar (drag to move window):
            let title_bar_rect = {
                let mut rect = rect;
                rect.max.y = rect.min.y + height;
                rect
            };
            let title_bar_response =
                ui.interact(title_bar_rect, Id::new("title_bar"), Sense::click());
            if title_bar_response.is_pointer_button_down_on() {
                frame.drag_window();
            }

            // Add the contents:
            let _content_rect = {
                let mut rect = rect;
                rect.min.y = title_bar_rect.max.y;
                rect
            }
            .shrink(4.0);

            ui.horizontal(|ui| {
                ui.label("    Theme:");
                egui::widgets::global_dark_light_mode_buttons(ui);
            });

            ui.horizontal(|ui| {
                ui.set_height(50.);
                ui.heading("    Vulnerability Details")});
                // User does not need to see Vuln ID!! ////////////////////////////////
                ////////////////////////////////////////////////////////////////////////
            //ui.with_layout(egui::Layout::left_to_right(egui::Align::TOP), |ui| {
            ui.horizontal(|ui| {
                ui.label("    Criticality:      ");
                ui.add_space(44.);
                egui::ComboBox::from_label("")
                .selected_text(self.this_vuln.level.to_string())
                .show_ui(ui, |ui| {
                    for level in [vuln::Criticality::Critical, Criticality::High, Criticality::Medium, Criticality::Low]{
                        ui.selectable_value(&mut self.this_vuln.level, level, level.to_string());
                    }
                });
            }); 
        
            ui.horizontal(|ui| {
                ui.label("    Title/Label:      ");
                ui.add_space(40.);
                ui.text_edit_singleline(&mut self.this_vuln.title);
            });
        
            ui.horizontal(|ui| {
                ui.label("    Short Description:      ");
                ui.text_edit_multiline(&mut self.this_vuln.short_desc);
            });
        
            ui.horizontal(|ui| {
                ui.label("    Detailed Description:");
                ui.text_edit_multiline(&mut self.this_vuln.detail_desc);
            });
        
            ui.horizontal(|ui| {
                ui.label("    Owner:");
                ui.add_space(75.);
                ui.text_edit_singleline(&mut self.this_vuln.owner);
            });

Everything is pushed way over to the left of the window and some buttons that are added to 'ui' below the code here seems to slightly be hanging off the edge of the left side of the windows. Any help would be appreciated.

I tried implementing Margin, but couldn't seem to make that work, or seemed like a bit much. Any pointers much appreciated.

Answer 1

Use ui.style_mut().spacing to set your spacing as described in https://docs.rs/egui/latest/egui/style/struct.Style.html

For example, to add spacing of 16.0 on X and Y:

ui.style_mut().spacing.item_spacing = vec2(16.0, 16.0);

To set indent:

ui.style_mut().spacing.indent = 16.0;

You have to place these code snippets inside the Ui that you want to change these values for.