Layout element sizes and filling

[Rochet2]

Hello. I am trying to create a small UI with egui.
However, the API regarding layout seems to be somewhat unintuitive to me.

Here is what I try to do.
There is a side panel with a list of elements. There is a center panel that is split in two: a top halve and bottom halve.
The bottom halve is of fixed height (lets say 100px). The top halve on the other hand fills the entire space and has a list of elements.
The bottom halve contains two elements where one takes a fixed width and the other takes the remaining space.

I assume this can be done with the library, but I cannot find a way to specify a region of fixed height or width.
Im having trouble splitting the UI into the regions I want and then fill those with elements.

I found that I can create two elements of which one is of fixed size and the other fills the remaining space:

egui/egui_demo_lib/src/apps/demo/password.rs

Lines 35 to 51 in 9dc092b

	let result = ui.with_layout(egui::Layout::right_to_left(), |ui| {
	// Here a local copy of the state can be changed by a user.
	let response = ui
	.add(egui::SelectableLabel::new(plaintext.0, "👁"))
	.on_hover_text("Show/hide password");
	if response.clicked() {
	plaintext.0 = !plaintext.0;
	}
	let text_edit_size = ui.available_size();
	// Here we use this local state.
	ui.add_sized(
	text_edit_size,
	egui::TextEdit::singleline(text).password(!plaintext.0),
	);
	});

From the demo I also see that I can make an element fill the height by using cross justify:

egui/egui_demo_lib/src/apps/demo/layout_test.rs

Lines 80 to 84 in ebb08f8

	fn layout(&self) -> Layout {
	Layout::from_main_dir_and_cross_align(self.main_dir, self.cross_align)
	.with_main_wrap(self.main_wrap)
	.with_cross_justify(self.cross_justify)
	}

However, I am having trouble with creating a fixed width or height areas that I can fill with these elements.
As an example, I would like to be able to somehow split the center panel into the two halves. Then continue to place some elements into the two areas.
I was able to create the elements into a fixed height layout, but setting the height seems quite clunky and feels like there is probably a better way to do this. Also, I am unsure how to create and place this code into a bottom halve of the desired layout.
I feel like there should be a way to first divide areas into some kind of parts where the actual buttons are then placed into, but I have not yet found how to do that.

         egui::CentralPanel::default().show(ctx, |ui| {
            let result = ui.with_layout(egui::Layout::right_to_left().with_cross_justify(true), |ui| {
                ui.set_min_height(100.0);
                ui.set_max_height(100.0);
                ui.add_sized([100.0, 1.0], egui::SomeElement);
                ui.add_sized(
                    ui.available_size(),
                    egui::SomeElement,
                );
            });
         });

I am also a bit sad that I am not able to use the nice ui.button() API when sizing elements or trying to set layout settings.
I feel that if its not possible to do everything in that style, then I am inclined not to use that style at all and simply default to always use ui.add(egui::SomeElement); for example.

[emilk]

This is a bit under-developed at the moment (i.e. not the best APIs), but you should be able to bolt it together using:

• ui.child_ui to exactly specify where you want Ui.
• https://docs.rs/egui/0.12.0/egui/struct.Ui.html#method.allocate_ui_with_layout
• https://docs.rs/egui/0.12.0/egui/struct.Ui.html#method.allocate_ui_at_rect

It would be good with some better API:s and a demo of this, but I don't have time to do that :(

[Rochet2]

Thanks. I will take a look tomorrow.

[Rochet2]

Whenever I tried to make space take 100% of the height, for example when tried to use bottom-up layout, the first element went to the bottom and the elements after that went further down instead of laying on top of the first element. The elements also seemed to stack on top of each other in some cases.
Unsure if these are issues or Im just doing something wrong.

I was able to do what I needed, but in the end I resorted to just using top-down layout with fixed sizes and manual calculation.
I will just leave it at that for now as it works and looks fine.

[parasyte]

when tried to use bottom-up layout, the first element went to the bottom and the elements after that went further down instead of laying on top of the first element. The elements also seemed to stack on top of each other in some cases.
Unsure if these are issues or Im just doing something wrong.

This sounds a lot like #385 which has been fixed in the master branch. If you want, you could try again with the current git revision instead of the latest release. There are probably other similar bugs fixed since the last release, too.

[Rochet2]

With 0.13.1 things seem to be working correctly, so I assume that was indeed the issue.