CSS size definitions for divs arent being honored.

[mscroggi]

I am working on a bingo board page. Its a simple, single html file with pure html and javascript.

I loaded NativeAlpha and it is a perfect pairing with my app. During bingo night, the app is run on a tablet and the display is shared to a large monitor overhead. It's a great setup.

However.. I noticed something.. Everything works just great on my old Galaxy Tab S5e tablet, my TCL NXTPaper 11" tablets, but I have noticed the display isn't on other tablets.

I have a Firetv 11 tablet and another budget 10" Android 15 tablet. Both of these have the same issue..

The bingo page displays called numbers in divs in a flex display with hard widths set in pixels. For some reason on these divs dont get the with settings and the numbers in the tiles are cut off.

I have been researching a way to force a width via css etc.. but I cannot get anything to change. I should point out too that the issue does not exist with the same page viewed on the tablet in a plain web browser.

I also noticed height values for buttons are not recognized either. The class I am trying to get working is "last-number"
I have set all kinds of hard values to force a width. but nothing works

    .last-number {
        background-color: #444;
        color: white;
        padding: 5px;
        border-radius: 5px;
        font-weight: bold;
        font-size: 4em;
        min-width:160px;
        width: 160px;
        text-align:center;
    }

There is something about the mechanisms in place for the kiosk view that causes this display anomaly.

bingo_splash_med_bigchant.html

Does anyone have any ideas? I am at a loss. Is this a bug in the app? The pages display fine in the browser.. but in the kiosk app the issue shows itself. I tried Fully Kiosk as a comparison.. In that app the width problem is gone.. but there is some css styling that gets removed after the page updates after selecting a tile.

Any help would be greatly appreciated.