Login ProductsSalesSupportDownloadsAbout |
Home » Technical Support » Elevate Web Builder Technical Support » Support Forums » Elevate Web Builder General » View Thread |
Messages 1 to 8 of 8 total |
Web apps for mobile and scaling for different resolutions |
Wed, Oct 24 2018 4:01 AM | Permanent Link |
Paul Coshott | Hi All,
I need to write a mobile app as a companion app to my web app. I started that today, but I'm not sure how to make sure all objects within each form scale to fit the phone, regardless of the screen resolution. I have a galaxy S8 and I can change the resolution to 3 different settings. Is there any way to make it look right on all of the different resolutions? Thanks, Paul |
Wed, Oct 24 2018 4:27 AM | Permanent Link |
Mark Brooks Slikware | Paul Coshott wrote:
<<Hi All, I need to write a mobile app as a companion app to my web app. I started that today, but I'm not sure how to make sure all objects within each form scale to fit the phone, regardless of the screen resolution. I have a galaxy S8 and I can change the resolution to 3 different settings. Is there any way to make it look right on all of the different resolutions? >> I also have to do this a lot. In my experience, the EWB Layout functionality is easily good enough for me to actually create a single app that is responsive based on device resolution. You should explore this functionality if you have not done so already, along with the Autosize functionality. The only area where I have had to "tweak" things is the removal of scrollbars on mobile devices. |
Wed, Oct 24 2018 5:03 AM | Permanent Link |
Uli Becker | Hi Mark,
> I also have to do this a lot. In my experience, the EWB Layout functionality is easily good enough for me to actually create a single app that is responsive based on device resolution. You should explore this functionality if you have not done so already, along with the Autosize functionality. The only area where I have had to "tweak" things is the removal of scrollbars on mobile devices. I agree. In addition: As a rule of thumb a width of 350px at design time will work to see how the mobile app will look like. There is also an emulator on Chrome. As of the scrollbars: there is a (quite new) property "ScrollSupport" for all scrollable controls which allows to switch off the scrollbars without losing the scroll-functionality. Cheers Uli |
Wed, Oct 24 2018 6:28 AM | Permanent Link |
Paul Coshott | Thanks guys. So for my main form, what Layout properties should I start with?
Position to TopLeft but what about the stretch? Thanks, Paul |
Wed, Oct 24 2018 7:51 AM | Permanent Link |
Uli Becker | Paul,
> Thanks guys. So for my main form, what Layout properties should I start with? > > Position to TopLeft > but what about the stretch? There are different approaches for mobile web applications. I tried them all <vbg> Here is what I do with all my mobile apps: 1. MainForm Layout.Position := lpTopLeft; Layout.Stretch := lsBottomRight; 2. Toolbar (and Menu) Layout.Position := lpTopLeft; Layout.Stretch := lsRight; Consumption := lcBottom; 3. ScrollPanel Layout.Position := lpTopLeft; Layout.Stretch := lsBottomRight; Scrollbars := sbNone; ScrollSupport := ssVertical; All Forms of the app are now parented to MainForm.ScrollPanel, e.g.: ChildForm: Parent := MainForm.ScrollPanel; Height := xy; Layout.Position := lpTopLeft; Layout.Stretch := lsRight; (not lsBottomRight) Uli |
Wed, Oct 24 2018 8:05 AM | Permanent Link |
Mark Brooks Slikware | Paul Coshott wrote:
<<Thanks guys. So for my main form, what Layout properties should I start with? Position to TopLeft but what about the stretch?>> Pretty much agree with Uli to be honest. Certainly an excellent starting point. Just remember that if your app is to be desktop AND mobile then I think you still need to adjust the scrollbar visibility in code somewhere at startup. |
Wed, Oct 24 2018 9:01 AM | Permanent Link |
Paul Coshott | Awesome, thanks guys. Appreciate the advice.
Cheers, Paul |
Tue, Oct 30 2018 2:33 PM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. timyoung@elevatesoft.com | Paul,
<< Thanks guys. So for my main form, what Layout properties should I start with? >> Some good things to remember: 1) The Application.Surface (TSurface instance) is, by default, set as Position: Top-Left, Stretch: Bottom-Right. Whether you alter these layout properties depends upon whether you wish to have the entire application scrollable via native browser scrollbars or not. If you do, then get rid of the Stretch: Bottom-Right and just make it stretch to the Right. Then, simply adjust the height of the surface as-necessary to accommodate your needs. 2) As Uli indicates, it may be easier to use a main form with a scroll panel as the parent because it gives you the option of designing one main container form that has common application elements like a menu or toolbar. You can then parent any other forms into the main scroll panel. Tim Young Elevate Software www.elevatesoft.com |
This web page was last updated on Friday, November 1, 2024 at 07:01 PM | Privacy PolicySite Map © 2024 Elevate Software, Inc. All Rights Reserved Questions or comments ? E-mail us at info@elevatesoft.com |