How do Anvil UI Elements handle responsive design?

[stucork]

@Tony.Nguyen

Anvil somehow is based on Angular

@Tony.Nguyen that’s incorrect - only the ide has some angular - and that’s increasingly sparse with the development of the new beta ide.

When you run your app there’s no angular.
You can see that anvil ships with bootstrap in this section of the docs.

---

@dfield

Generally responsiveness in anvil is handled using a ColumnPanel.
You can decide when you want the ColumnPanel to wrap by setting the wrap_on property (the default value is "mobile")

here’s a linked thread that might help.

What is the best practice to make anvil app looks good on mobile device?

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*: How do I make my apps look…

If you need more control you can escape to html/css.