[GH-ISSUE #223] CSS size definitions for divs arent being honored. #204

New issue

Closed

opened 2026-10-29 12:16:59 +00:00 by bsakaguchi · 1 comment

bsakaguchi commented

2026-10-29 12:16:59 +00:00

Owner

Originally created by @mscroggi on GitHub (Feb 16, 2026).
Original GitHub issue: https://github.com/cylonid/NativeAlphaForAndroid/issues/223

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.

Originally created by @mscroggi on GitHub (Feb 16, 2026). Original GitHub issue: https://github.com/cylonid/NativeAlphaForAndroid/issues/223 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. ![Image](https://github.com/user-attachments/assets/b7931473-7b7e-4d36-8597-1dcbf8ea88e9) [bingo_splash_med_bigchant.html](https://github.com/user-attachments/files/25349341/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.

bsakaguchi closed this issue

2026-10-29 12:16:59 +00:00

bsakaguchi commented

2026-10-29 12:16:59 +00:00

Author

Owner

@mscroggi commented on GitHub (Aug 1, 2026):

I eventually worked this out. This report can be removed. In the end it came down to utilizing flex in css to control the tiles.

@mscroggi commented on GitHub (Aug 1, 2026): I eventually worked this out. This report can be removed. In the end it came down to utilizing flex in css to control the tiles.