Maximising content on browser #7155

DanielVandH · 2024-12-18T15:38:02Z

DanielVandH
Dec 18, 2024

I'm trying to figure out how, for an app I've compiled with WASM, to make the content maximise to the size of the browser. Consider the following setup:

src/main.rs:

slint::include_modules!();

#[cfg_attr(target_arch = "wasm32",
           wasm_bindgen::prelude::wasm_bindgen(start))]
pub fn main() {
    let main_window = MainWindow::new().unwrap();
    main_window.run().unwrap();
}

ui/app-window.slint:

export component MainWindow inherits Window {
    preferred-height: 600px;
    preferred-width: 1200px;

    Rectangle {
        background: red;
        height: 100%;
        width: 100%;
    }
}

index.html:

<html>
    <body>
        <!-- canvas required by the Slint runtime -->
        <canvas id="canvas"></canvas>
        <script type="module">
            // import the generated file.
            import init from "./pkg/slint_window.js";
            init();
        </script>
    </body>
</html>

Cargo.toml:

[package]
name = "slint_window"
version = "0.1.0"
edition = "2021"

[dependencies]
slint = "1.8.0"

[build-dependencies]
slint-build = "1.8.0"

[target.'cfg(target_arch = "wasm32")'.dependencies]
wasm-bindgen = { version = "0.2" }
getrandom = { version = "0.2.2", features = ["js"] }

[lib]
path = "src/main.rs"
crate-type = ["cdylib"]

When I compile this with wasm-pack build --release --target web and then launch the server locally with python -m http.server, the page I see at localhost:8000 looks like

Is there a setting I can change to make the content enlarge to the dimensions of the browser, i.e. make that entire white space red?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Maximising content on browser #7155

{{title}}

Replies: 0 comments

Select a reply

Maximising content on browser #7155

DanielVandH Dec 18, 2024

Replies: 0 comments

DanielVandH
Dec 18, 2024