search

ezeek / smartly-base

0 stars 0 forks source link

Dashboard link tiles drop down 1/2 a row when 1x2 or larger #9

Open TechMedX opened 4 years ago

TechMedX commented 4 years ago

This occurs whether or not I'm viewing via the iOS app or via chrome/safari to the Hubitat portal

TechMedX commented 4 years ago

cf7975e87698292c430e4f3ebcb911fb3babe71f

TechMedX commented 4 years ago

Problem seems to be isolated to iOS. Not present on Android or Windows OS.

TechMedX commented 4 years ago

It may be good to note in the bug that for every row you extend the dashboard link tile, it drops it another 1/2 a row. e.g. when you extend it across 2 columns it drops 1/2 row, when you extend it across 3 columns it drop is 1 row, extended across 4 columns 1 1/2 row, etc.

https://community.hubitat.com/t/release-smartly-the-hubitat-dashboard-skin-engine/36681/135

ezeek commented 4 years ago

2 part issue:

iOS bug 1: "when using zoom: (1.00651); or greater and using 'margin-top: auto; margin-bottom: auto' or 'margin-top: calc(x%); webkit intermittently loses its ability to calculate used/unused space and fails to set a margin."

If using smartly device calibration and the resulting media query uses a zoom value of anything over 1.00651, dashboard link tiles lose their top and bottom margin values intermittently when using 'calc(x%)' and 'auto' for margin-top and margin-bottom. This is certainly an iOS bug. In order to prevent this glitch, we used 'margin-top: calc(12%); margin-bottom: calc(12%);' but sadly when dashboard tile widths are over 1x wide, another bug appears.

iOS bug 2: "when using margin 'calc(x%)' values and a grid item spans further than 1 column wide, webkit doubles its calculation of occupied space, resulting in a lower-aligned element than expected."

ezeek commented 4 years ago

Proposed fix:

.tile.dashboard {
  margin-top: 1em;
  margin-bottom: 1em;
}