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?

ogoffart · 2024-12-30T11:40:53Z

ogoffart
Dec 30, 2024
Maintainer

It needs to be done in HTML.
I think the slide_puzzle demo does something similar to what you want.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Maximising content on browser #7155

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Maximising content on browser #7155

Uh oh!

DanielVandH Dec 18, 2024

Replies: 1 comment

Uh oh!

ogoffart Dec 30, 2024 Maintainer

DanielVandH
Dec 18, 2024

ogoffart
Dec 30, 2024
Maintainer