It may sound like a vague question. But, my issue is after making the app look nice on the PC and then traying it on mobile devices, everything gets pushed and I lose the organized design I made on the web page!
I think this is one place where the anvil editor has some improvement to do since it has no option of changing the viewport⌠and so is misleading when it comes to mobile development.
You have some choices:
Do you want your app to look the same on all devices?
Do you want your app to change and be responsive on a mobile?
If 1 then all containers that might wrap should have wrap_on set to never - this will mean that what you see in the design view is what you get*:
*sort of what you get - you have to be a little careful that things donât shrink too much and become unreadable on mobileâŚ
If 2 then think carefully about how you want it to wrap.
In your example it looks like you have: phone_label, phone_box, email_label, email_box inside a card on one row in the design view with wrap_on set to mobile.
Keep this set up but instead put two ColumnPanels side by side knowing that these will later become 2 rows on mobile (as below with blue borders). You can then decide how you want the ColumnPanels to wrap.
for mobile display, grouping components vertically in Column Panels scales to fit any screen nicely, but can sometimes look awkwardly wide on PC. A way to get around this is to place components that should be next to eachother on a wide screen side by side in a column panel, so if screen is wide they appear properly but if screen is narrow the one on the right goes underneath the one on the left. For example:
If you want to have one design for mobile and one design for desktop, you could measure the screen and available space by putting this into a custom html component and calling the function with self.call_js(âmeasure_screenâ). If w<h, display the mobile optimized forms. if w>h display desktop optimized forms.
<script>
function measure_screen(){
var w = screen.width
var h = screen.height
var aw = screen.availWidth
var ah = screen.availHeight
return {
w: w,
h: h,
aw:aw,
ah:ah
};
};
</script>
Thatâs sounds promising, however I donât have much experience with html, would you be able to give an app example where I can see how and where to use this script.