Custom tiles showing differently

SharpTools.io (web)
1

So while messing with the volume slider and making a youtube close button, I started getting annoyed with how these items showed up on different devices.

On my pc, using developer tools, set to my tablet’s resolution, I had to make the text tiny to make it fit the tablet, on the PC it shows rediculously small.

Is there a trick or HTML code I need to add, so my slider and button show the same on both devices?

I sized the volume slider for viewing on tablet of course, but it shows like this on PC:

20220122_234135
20220122_2341351920×933 298 KB

On my tablet, it shows like this:

20220122_234213
20220122_2342131920×933 118 KB

2

You’re likely running into two different issues.

1. Scaling

The default sizes for most HTML elements is in pixels which is a fixed measurement… but as you’ve noted, the screen size on your tablet and your PC are different. As such we generally recommend using dynamic measurements. This is briefly touched on in the Custom Tiles developer documentation:

Prefer dynamic measurements rather than fixed pixel sizes
Users retain the ability to adjust tile dimensions as they see fit, so also plan on accommodating larger or smaller tile sizes where reasonable em, vh, or % sizes provide flexibility in scaling compared to px units and can be used with font sizes, div sizes, etc.

The ‘window’ size will be the size of the tile since the custom HTML is displayed in an iframe. This can be used as a helpful reference if you want to dynamically calculate sizes or use CSS @media queries

A simple approach is to use viewport relative sizes. So looking back at your Fully Kiosk Volume Slider post, it looks like the style was using pixel measurements:

.slider{
   -webkit-appearance: slider-vertical;
   width: 8px;
   height: 225px;
   padding: 0 5px;
   position: relative
}

You could change those to size relative to the ‘viewport’ (effectively the size of the custom tile):

.slider{
   -webkit-appearance: slider-vertical;
   width: 50vw;
   height: 80vh;
   padding: 0 15vh;
   position: relative
}

So 50vw is basically saying 50% of the width of the tile (viewport width). And 80vh is saying 80% of the height of the tile (viewport height).

2. HTML Range Styling

Unfortunately, I don’t think there’s an ‘easy’ answer here. Each browser has their own set of rules and default styles applied to a range. You can use CSS to adjust various parts of a range and it tends to be relatively straightforward for a horizontal slider (though a lot of detail), but gets complex with vertical sliders.

Another approach is to use a JavaScript library to create the slider. I’ll respond over in your Custom Tile: Fully Kiosk Volume Slider thread with an example.

1 Like
3

Will try that out once I get the chance, thank you very much!