Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

ipad grid woes

0 views
Skip to first unread message

Andrew Poulos

unread,
Dec 23, 2020, 10:41:36 PM12/23/20
to
I have a div with this css

#con {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
row-gap: 8px;
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
}

and it contains this div

#question {
grid-column: 1 / -1;
grid-row: 1 / -1;
align-self: end;
justify-self: start;
}

'question' div should appear in the bottom left corner of 'con' and it
does everywhere in my testing (Windows Chrome, Windows Firefox, Android
phone, Mac Safari) except on an ipad!

On an ipad it appears in the *top* left corner of 'con'. I've tried lots
of edits to the CSS but I can't get 'question' to honour the align-self
setting.

What can I do to get this to work?

Andrew Poulos

Evertjan.

unread,
Dec 24, 2020, 5:54:12 PM12/24/20
to
Andrew Poulos <ap_...@hotmail.com> wrote on 24 Dec 2020 in
comp.infosystems.www.authoring.stylesheets:

> On an ipad it appears in the *top* left corner of 'con'. I've tried lots
> of edits to the CSS but I can't get 'question' to honour the align-self
> setting.
>
> What can I do to get this to work?

Specify the browser[s].

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Andrew Poulos

unread,
Dec 24, 2020, 9:21:31 PM12/24/20
to
On 25/12/2020 9:53 am, Evertjan. wrote:
> Andrew Poulos <ap_...@hotmail.com> wrote on 24 Dec 2020 in
> comp.infosystems.www.authoring.stylesheets:
>
>> On an ipad it appears in the *top* left corner of 'con'. I've tried lots
>> of edits to the CSS but I can't get 'question' to honour the align-self
>> setting.
>>
>> What can I do to get this to work?
>
> Specify the browser[s].

On an ipad, it fails with Safari (on an ipad, it works with Chrome and
Firefox).

Andrew Poulos


Andrew Poulos

unread,
Dec 29, 2020, 5:37:32 PM12/29/20
to
Further to this, it's interesting that 100vh is interpreted differently
on an ipad between Safari and Chrome or Firefox. To get Safari to behave
I needed to use this code:

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
document.body.style.height = 'calc(var(--vh, 1vh) * 100)';


Andrew Poulos

0 new messages