Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Length::Fill fills window, not parent #304

Closed
zackyancey opened this issue Apr 18, 2020 · 2 comments
Closed

Length::Fill fills window, not parent #304

zackyancey opened this issue Apr 18, 2020 · 2 comments
Labels
improvement An internal improvement layout

Comments

@zackyancey
Copy link

I'm new to GUI programming, so I may just be going about this the wrong way, but I haven't found a way to get the results that I'm looking for. Consider the following layout:

use iced::{button, Button, Column, Element, Length, Row, Sandbox, Settings, Text};

pub fn main() {
    App::run(Settings::default())
}

#[derive(Default)]
struct App {
    button_a: button::State,
    button_b: button::State,
    button_c: button::State,
}

impl Sandbox for App {
    type Message = ();

    fn new() -> Self {
        Self::default()
    }

    fn title(&self) -> String {
        String::from("Fill parent")
    }

    fn update(&mut self, _message: ()) {}

    fn view(&mut self) -> Element<()> {
        let button_a = Button::new(&mut self.button_a, Text::new("aaa")).on_press(());
        let button_b = Button::new(&mut self.button_b, Text::new("bbbb")).on_press(());
        let button_c = Button::new(&mut self.button_c, Text::new("c")).on_press(());
        Row::new()
            .height(Length::Shrink)
            .width(Length::Shrink)
            .push(button_a.height(Length::Units(100)))
            .push(
                Column::new()
                    .width(Length::Shrink)
                    .height(Length::Fill)
                    .push(button_b.width(Length::Fill).height(Length::Fill))
                    .push(button_c.width(Length::Fill).height(Length::Fill)),
            )
            .into()
    }
}

I want B and C to fill their column horizontally and vertically. Since the column's width is set to shrink, the column's width should be the shortest possible (just wide enough for button B). Similarly, the column's height should fill the row, which is shrunk to the height of button A. So something like this:

image

However, instead on desktop I get this:
image
The elements fill the entire window, not their container.

and on web:
image
Widths seem to work the way I hoped, but setting height doesn't seem to work at all.

I think what should be happening is that Length::Fill elements should only fill the space available in the parent, and Length::Shrink containers should take the minimum possible size for all elements and pick the largest one. If that's not the way it should work, then maybe a new variant (Length::FillParent?) would be useful.

@hecrj
Copy link
Member

hecrj commented Apr 18, 2020

Yes, Shrink should be renamed to something like Content.

The current native layout engine, while usable, is one of the most experimental parts of the library. As you see, iced_web doesn't completely match its behavior.

We need to iterate further and fix any inconsistencies like this one. Either by renaming things or improving the engine itself.

@hecrj hecrj added question Further information is requested bug Something isn't working labels Apr 18, 2020
@hecrj hecrj added feature New feature or request layout improvement An internal improvement and removed bug Something isn't working feature New feature or request question Further information is requested labels Jan 18, 2022
@hecrj
Copy link
Member

hecrj commented Jan 18, 2022

After #1044, I believe the behavior described in the issue is easily achievable. Closing!

@hecrj hecrj closed this as completed Jan 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
improvement An internal improvement layout
Projects
None yet
Development

No branches or pull requests

2 participants