Stuck on aligning text in a button (screenshot to help)

[mjehrhart]

I am trying to Left align my text in a button but I am doing something wrong.

ui.with_layout(egui::Layout::from_main_dir_and_cross_align(
        egui::Direction::TopDown,
        egui::Align::LEFT), |ui| { 
        if ui
            .add_sized([143.0, 1.0], egui::Button::new("All Files"))
            .clicked()
        {
            //do something
        }
    });

Here is a screenshot of how the text looks in the ui for a reference. I want the "All Files" text to align to the left. Any suggestions on how to accomplish this task?

Thanks,
matthew

[mjehrhart]

I think I need to use on of these but I can't figure out how:

[emilk]

I think you need to set Layout::main_align, and that is not exposed in the API because I haven't tested it, and it might very well be broken. Feel free to try it out, and if it seems to work, open a PR for it :)

PS: the layout API is quite confusing and needs a rewrite, but the gist of it is this:

• main axis: X for horizontal layouts, Y for vertical layouts
• cross axis: orthogonal to the main axis
• main_align means "how to align on the main axis"
• cross_align means "how to align on the orthogonal axis to the main axis"

It is usually easier to think of horizontal/vertical alignment rather than main/cross, so next time I rewrite this code I'll likely use those terms everywhere instead.

[mjehrhart]

Thanks for the info. I'm taking a look at it now.

Looks like the main_dir is often hardcoded to Align::Center, if im reading that correctly.

[loremdipso]

It's been some time, and I think the answer to this question may have changed somewhat. AFAICT the best way of accomplishing this today is to add some empty text to the right of the button, like so:

if ui.add(egui::Button::new("All Files").right_text("")).clicked() {
   ...
}

Bit of a hack, but I could never get anything else to affect the text inside the button, just the button itself.

[justincredible]

There's definitely something weird going on here. These screenshots from the "Layout Test" window of the demo app show that cross_align affects both the placement of the component within the layout area and the alignment of the component's text:

Those screenshots use a slightly modified demo app that increases the button's size:

crates/egui_demo_lib/src/demo/tests/layout_test.rs

-    let _ = ui.button("button");
+    let _ = ui.add(egui::Button::new("button").min_size([100., 50.].into()));

The main_align field only affect the components' text alignment on the main axis, which is not relevant for vertical Directions in your case. There are some issues with main_justify I will raise later, but I suspect there may also be issues with nested layouts.