How to make same-width buttons in a column?

Learn
1 
 Column::new()
                .push(Button::new("Alpha"))
                .push(Button::new("Beta"))
                .push(Button::new("Gamma"))
                .push(Button::new("Delta")),

How to make these buttons:

  • all have the same width
  • the width being that of the button that fits the widest content?

Calling .width(Length::Fill) on the buttons fills available space, e.g. the window, which is not what I’m after. Calling .size().width doesn’t give a numeric width that can be calculated with. Alternatives?

2

I think you were right on setting .width(Length::Fill) on your buttons but also make sure their container (the column) doesn’t grow more than it needs. What if you call .width(Length::Shrink) on it?

3 
            Column::new()
                .push(button("Alpha").width(Length::Fill))
                .push(button("Beta").width(Length::Fill))
                .push(button("Gamma").width(Length::Fill))
                .align_x(Horizontal::Center)
                .width(Length::Shrink)

This makes all the buttons disappear.

4

You’re right. The best solution I could come up with implies that the widths of your buttons are know before runtime, that they don’t change during runtime, and that you can place your widest button first. Under those conditions, this works:

        Column::new()
            .push(button("Gamma"))
            .push(button("Alpha").width(Length::Fill))
            .push(button("Beta").width(Length::Fill))
            .align_x(Center)
            .width(Length::Shrink)
5

@lufte Thanks for your help. Yes, it seems there’s no path forward unless I reorder the buttons. That’s unfotunate.

I’m trying the same thing in egui. It also doesn’t do this out-of-box, but since it can give me numeric sizes, I can do a two-pass calculation to manually set the button sizes.

I guess this is the kind of thing that makes it pre-1.0.

6

It is certainly possible to do so today. You can use the responsive widget to calculate the size they must have lazily and then set their widths to that Length::Fixed with that amount

use iced::widget::{button, center, column, container, responsive, row, text};
use iced::Length::Fill;
use iced::{Element, Task};

fn main() -> iced::Result {
    iced::application("iced • same sized buttons", App::update, App::view)
        .centered()
        .run()
}

#[derive(Debug, Clone)]
enum Message {
    PressMe,
}

#[derive(Default)]
struct App;

impl App {
    fn update(&mut self, message: Message) -> Task<Message> {
        match message {
            Message::PressMe => {
                println!("Button pressed!");
            }
        }

        Task::none()
    }

    fn view(&self) -> Element<Message> {
        responsive(|size| {
            center(row![
                column![
                    button("Alpha").on_press(Message::PressMe).width(size.width),
                    button("Beta").on_press(Message::PressMe).width(size.width),
                    button("Gamma").on_press(Message::PressMe).width(size.width),
                    button("Delta").on_press(Message::PressMe).width(size.width),
                    button("Epsilon")
                        .on_press(Message::PressMe)
                        .width(size.width),
                ]
                .spacing(5)
                .width(Fill),
                container(text("All buttons have the same width!")).center(Fill),
            ])
            .padding(20)
            .width(Fill)
            .height(Fill)
            .into()
        })
        .into()
    }
}
1 Like
7

Awesome, thanks. That gets me further.

But, I’d still like for the buttons to be the width of the button that fits the longest string and no wider than that. The responsive container says it takes up all available space, and so in the above example the buttons stretch across as far as they can.

I tried to constrain it with Shrink and horizontal_space but wasn’t able to do so:

    row![
        container(responsive(|size| {
            column![
                button("Alpha").width(size.width),
                button("Beta").width(size.width),
                button("Gamma").width(size.width),
                button("Delta").width(size.width),
                button("Epsilon").width(size.width),
            ]
            .spacing(4)
            .into()
        }))
        .width(Length::Shrink),
        horizontal_space(),
    ]
    .width(Length::Fill)
    .into()

Maybe there is a trick to doing this also?