Icon View Thread

The following is the text of the current message along with any replies.
Messages 11 to 15 of 15 total
Thread Scrolling Issues with Mobile Web Apps.
Sat, Oct 29 2022 7:34 PMPermanent Link

Steve Gill

Avatar

I've decided to split the form up into pages of a TPageControl instead of trying to get the scrolling working.

= Steve
Sat, Oct 29 2022 10:45 PMPermanent Link

erickengelke

Avatar

Steve Gill wrote:

> I've decided to split the form up into pages of a TPageControl instead of trying to get the scrolling working.

Okay, this disappearing scrollbars bug (IMHO) or feature according to apple is true in all apple products when used with certain scrolling containers.  It's supposed to recover screen real estate, especially on the tight iPhone screen.

I found a way that works with my program and add permanent scrollbars to Macs (Safari and Chrome) that failed with certain scrollable elements, and let my iPad scroll always  but with disappearing scrollbars.  

To fix it, add the following function to your main page's onshow function and see if it helps you:


procedure AddCSS;
var
 newcss : string;
 felement : THTMLCSSELement;
 nl : TNodeList;
begin
 newcss := '::-webkit-scrollbar { '+#13+
   '-webkit-appearance: none;'+#13+
   'width: 17px; '+#13+
   'height: 3px; ' + #13+ // new
   '}'+#13 +
    '::-webkit-scrollbar-track { '+#13+
    'height: 5px !important; '+#13+
    '}'+#13+

   '::-webkit-scrollbar-thumb { '+ #13+
   'border-radius: 4px; '        +#13+
   'background-color: rgba(0,0,0,.5);'  +#13+
   '-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);'  +#13+

   '}';

 FElement:=THTMLCSSElement(CreateHTMLElement('style'));
 nl := window.document.getElementsByTagName( 'head' );
 felement.innerhtml := newcss;
 nl[0].appendChild( felement );


end;
EWB Programming Books and Component Library
http://www.erickengelke.com
Sun, Oct 30 2022 7:21 PMPermanent Link

erickengelke

Avatar

erickengelke wrote:

>Steve Gill wrote:

>> I've decided to split the form up into pages of a TPageControl instead of trying to get the scrolling working.

The problem with that is even paginated forms often  need scrolling to work.

> I found a way that works with my program and add permanent scrollbars to Macs (Safari and Chrome) that failed with certain scrollable elements, and let my iPad scroll always  but with disappearing scrollbars.  

> To fix it, add the following function to your main page's onshow function and see if it helps you:

I find it absolutely deplorable that you have to jimmy in some extra CSS just to tell Apple products to "do the right thing" as intended by the developer.  And since this breaks so many good web sites, hundreds of Web sites tell people to change the default to fix this stupid incompatible behavior.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Mon, Oct 31 2022 7:24 PMPermanent Link

Steve Gill

Avatar

Hi Erick,

<< Okay, this disappearing scrollbars bug (IMHO) or feature according to apple is true in all apple products when used with certain scrolling containers.  It's supposed to recover screen real estate, especially on the tight iPhone screen.

I found a way that works with my program and add permanent scrollbars to Macs (Safari and Chrome) that failed with certain scrollable elements, and let my iPad scroll always  but with disappearing scrollbars.  

To fix it, add the following function to your main page's onshow function and see if it helps you:


procedure AddCSS;
var
 newcss : string;
 felement : THTMLCSSELement;
 nl : TNodeList;
begin
 newcss := '::-webkit-scrollbar { '+#13+
   '-webkit-appearance: none;'+#13+
   'width: 17px; '+#13+
   'height: 3px; ' + #13+ // new
   '}'+#13 +
    '::-webkit-scrollbar-track { '+#13+
    'height: 5px !important; '+#13+
    '}'+#13+

   '::-webkit-scrollbar-thumb { '+ #13+
   'border-radius: 4px; '        +#13+
   'background-color: rgba(0,0,0,.5);'  +#13+
   '-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);'  +#13+

   '}';

 FElement:=THTMLCSSElement(CreateHTMLElement('style'));
 nl := window.document.getElementsByTagName( 'head' );
 felement.innerhtml := newcss;
 nl[0].appendChild( felement );


end; >>

Thanks, I will give it a try!

= Steve
Mon, Oct 31 2022 7:28 PMPermanent Link

Steve Gill

Avatar

Hi Erick,

<< I find it absolutely deplorable that you have to jimmy in some extra CSS just to tell Apple products to "do the right thing" as intended by the developer.  And since this breaks so many good web sites, hundreds of Web sites tell people to change the default to fix this stupid incompatible behavior. >>

Yeah it makes no sense.

= Steve
« Previous PagePage 2 of 2
Jump to Page:  1 2
Image