Set a max height for ui.collapsing

[attran1]

Hello all,

I am writing a UI to manipulate huge Json files. It allows users to pick and transfer some nodes from one file to another. I am using all top/left/right/central panels. I am max out. So I am in the process of using ui.collapsing.

On the left panel, I have the input json file. I want to break it into 2 sections with the top showing node headers, and the bottom the actual json within that header. Unfortunately, there are too many headers. It consumes the whole left panel. Is there a way to force the height of this ui.collapsing? The user can then scroll the headers and can still see the bottom section.

Thanks,
Anthony

[YgorSouza]

There is a max_height method to constrain the space taken by the scroll area in the UI.

        egui::CentralPanel::default().show(ctx, |ui| {
            ui.add(DragValue::new(&mut self.height1).range(100.0..=600.0));
            let text_style = egui::TextStyle::Body;
            let row_height = ui.text_style_height(&text_style);
            ScrollArea::vertical()
                .id_salt("first")
                .max_height(self.height1)
                .show_rows(ui, row_height, 1000, |ui, range| {
                    for i in range {
                        ui.label(format!("First {i}"));
                    }
                });
            ui.separator();
            ScrollArea::vertical().id_salt("second").show_rows(
                ui,
                row_height,
                1000,
                |ui, range| {
                    for i in range {
                        ui.label(format!("Second {i}"));
                    }
                },
            );
        });

Screencast.from.2024-11-02.07-52-02.mp4

[attran1]

Thank you for your suggestion. I have implemented similar solution creating Windows with anchor and positioning. It does not meet my need because I want to allow customer to collapse the header so that they can have real estate to look at the body.

I took your example and modified as such. Now the codes below meet my requirements.

Anthony

    SidePanel::left("input")
        .exact_width(450.0)
        .show(ctx, |ui: &mut Ui|{

        ScrollArea::vertical().max_height(self.height1).id_salt("Input Header")
        .show(ui, |ui: &mut Ui|{
            ui.collapsing("document header", |ui| {
                ui.with_layout(egui::Layout::top_down_justified(egui::Align::LEFT), |ui| {
                    for (idx, example) in self.input_list.iter().enumerate() {
                        let is_open = self
                        .input_list_idx
                        .is_some_and(|open_idx| open_idx == idx);
                        if ui.selectable_label(is_open, example.file_stem().unwrap().to_str().unwrap()).clicked() {
                            if is_open {self.input_list_idx = None;} 
                            else {self.input_list_idx = Some(idx);}
                        }
                    }
                });
            });
        });

        ui.add_space(3.0);
        ui.label("document details");
        ScrollArea::vertical().id_salt("Input Details")
        .show(ui, |ui: &mut Ui|{
            match self.input_list_idx {
                Some(open_idx) => {
                    if open_idx != self.doc_idx {doc_selection(self, open_idx);}
                    JsonTree::new("Input Chapter", &self.doc_json)
                    .default_expand(egui_json_tree::DefaultExpand::All)
                    .show(ui);
                }
                None => ()
            }
            });
        
        });