search

DroidScript / Tracker

Bug Tracking and Feature Requests
5 stars 0 forks source link

Page frame does not take into account the App bar space - default Hybrid app DS 2.67 #4

Open GT-CBG opened 5 months ago

GT-CBG commented 5 months ago

Hi - just create a default Hybrid 'Multipage' app and in the Home.js page change the layout arrangement option to 'top' (see the line of code below). When you launch the app you will now notice that the 'home' icon will now overlap with the App Bar. The problem might be with the App Bar or it might be with the "frame" this.layPage layout. Thanks

this.lay = ui.addLayout( this.main.layPage, "linear", "fillxy,top" )

hamacjumar commented 4 months ago

Hi, I got an error subscribing to premium this month due to an error that says, "Google Play billing is not supported in the app version" (something like that) or maybe its because of my device which is an old version. I am now setting up DroidScript in a new device

For the mean time, if you can paste the code of the "Multipage" hybrid app here, I may able to resolve this issue faster.

Regards

GT-CBG commented 4 months ago

No problem, here it is. I have also attached a screenshot - the whole page "frame" (grey background) is shifted up. Screenshot_20240208_122020 Multipage Test.zip

hamacjumar commented 4 months ago

Thank you for that.

Upon expecting your code, I found out that you are using the setScale method. The setScale method is a css transform implementation on the UI Component and therefore enlarging a control will overlap the control on its top.

Here's an explanation from ChatGPT

"When you apply a CSS transform to an element, it changes the visual rendering of the element without affecting the layout or positioning of other elements around it, including its parent element. This behavior is by design in CSS and is part of what makes transforms useful for creating visually appealing effects without disturbing the document flow."

hamacjumar commented 4 months ago

To enlarge the text that can affect the flow of the layout, use textSize instead.

Regards

hamacjumar commented 4 months ago

Some useful tip that might help you with dynamic sizing

Do you know you can set the size of the frame layout to occupy the available space of the main layout without passing the height argument? Yes, you can do that. Just pass a "FillAxis" option. This will make the width or height of a control to occupy the available space of its parent according to its orientation or axis.

Try this

//Create layout for pages and load home page.
this.layPage = ui.addLayout( this.layMain, "frame", "FillAxis", 1)

Regards

GT-CBG commented 4 months ago

Hi Jumar, thanks, I understand now that the problem is with the use of the icon and setScale() ! Any other control would have displayed the correct behaviour. All working as expected then, thanks again

I think we should suggest to edit the proposed starting code for Hybrid apps with Menu bar and change that line to

this.layPage = ui.addLayout( this.layMain, "frame", "FillAxis", 1)

hamacjumar commented 4 months ago

Hi Jumar, thanks, I understand now that the problem is with the use of the icon and setScale() ! Any other control would have displayed the correct behaviour. All working as expected then, thanks again

I think we should suggest to edit the proposed starting code for Hybrid apps with Menu bar and change that line to

this.layPage = ui.addLayout( this.layMain, "frame", "FillAxis", 1)

Will notify David for this one.