How do I set the width of buttons when using stack switcher in gtk-rs

Question

I am using gtk-rs to build an application and currently I am having some trouble adjusting the width of the buttons when using StackSwitcher. I have tried using CSS for this as the gtk-rs book seems to imply but I just get an error stating No property named width. I have an example of my method for building the stack switcher below:

use gtk::prelude::*;
use gtk::{ApplicationWindow};
use gtk::StackTransitionType::SlideLeftRight;

pub fn home_box(window: &ApplicationWindow) {
    let container = gtk::Box::new(gtk::Orientation::Vertical, 100);
    
    window.set_child(Some(&container));

    let stack = gtk::Stack::new();

    stack.set_transition_type(SlideLeftRight);
    stack.set_transition_duration(200);

    let home_label = gtk::Label::new(Some("Home"));
    stack.add_titled(&home_label, Option::<&str>::None, "Home");

    let label1 = gtk::Label::new(Some("placeholder"));
    stack.add_titled(&label1, Option::<&str>::None, "placeholder");

    let label2 = gtk::Label::new(Some("placeholder2"));
    stack.add_titled(&label2, Option::<&str>::None, "placeholder2");

    let label3 = gtk::Label::new(Some("Settings"));
    let opt: Option<&str> = Some("Settings");
    stack.add_titled(&label3, opt, "Settings");

    let stack_switcher = gtk::StackSwitcher::new();
    stack_switcher.set_stack(Some(&stack));

    container.append(&stack_switcher);
    container.append(&stack);

    window.present();
}

I would like to reduce the width of the buttons when using StackSwitcher. I would also like to have the buttons be at the bottom of the screen and not at the top. Gernally speaking I would like to know how to customize the appearance of this widget.

Answer 1

You can set up the .stack-switcher as shown on the page.

Example

style.css

.stack-switcher button {
    min-height: 22px;
    min-width: 24px;
    border: 0px;
    background-color: #4d5261;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0 0 0 1px blue;
}

.stack-switcher label {
    border: 0px;
    background-color: red;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0 0 0 1px blue;
    color: white;
}

main.rs

use gtk::prelude::*;
use gtk::{Application, ApplicationWindow, Button, Orientation};
use std::sync::{Arc, Mutex};
const APP_ID: &str = "org.gtk_rs.HelloWorld3";

fn main() {
    let app = Application::builder().application_id(APP_ID).build();
    app.connect_startup(|app| {
        let provider = gtk::CssProvider::new();
        let style = include_bytes!("style.css");
        provider.load_from_data(style).expect("Failed to load CSS");
        gtk::StyleContext::add_provider_for_screen(
            &gdk::Screen::default().expect("Error initializing gtk css provider."),
            &provider,
            gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
        );
        build_ui(app);
    });
    app.run();
}

fn build_ui(app: &Application) {
    let window = ApplicationWindow::builder()
        .application(app)
        .title("My GTK App")
        .default_width(360)
        .default_height(720)
        .build();
    let container = gtk::Box::new(gtk::Orientation::Vertical, 100);

    window.add(&container);

    let stack = gtk::Stack::new();

    stack.set_transition_type(gtk::StackTransitionType::SlideLeftRight);
    stack.set_transition_duration(200);

    let home_label = gtk::Label::new(Some("Home"));
    stack.add_titled(&home_label, "Home", "Home");

    let label1 = gtk::Label::new(Some("placeholder"));
    stack.add_titled(&label1, "placeholder", "placeholder");

    let label2 = gtk::Label::new(Some("placeholder2"));
    stack.add_titled(&label2, "placeholder2", "placeholder2");

    let label3 = gtk::Label::new(Some("Settings"));
    stack.add_titled(&label3, "Settings", "Settings");

    let stack_switcher = gtk::StackSwitcher::new();

    container.pack_start(&stack_switcher, false, false, 0);
    stack_switcher.set_stack(Some(&stack));

    container.add(&stack);
    window.show_all();
    window.present();
}