Realistic Design Preview

I’ve noticed a large difference between what is rendered in the anvil designer, and what is ultimately rendered when the web app is published. I’d like to see a more accurate representation of the final product rather than having to blindly guess at what is going to happen with the final result.

do you find this on all screens? or just small screens?

I tend to turn wrap_on to never for all components which helps me.

I don’t find that at all. Could you maybe share a couple of screen shots (designer view & published view)? I’m curious …

1 Like

Just some background info. I’m using Windows 10, chrome at 100% zoom. 15.6 inch diagonal screen.

Here’s the designer view:

Here’s the final product:

The biggest difference I see is that the container of the app in the IDE is narrower than the container of the app in the final product.

Do you see the same difference when you shrink the window of the final product (or expand the window with the IDE) so that the areas dedicated to the content have the same width?

1 Like

Ah ok, you’re using custom html/css if I remember correctly.

My thoughts are (assuming I’m right) … when you are in edit mode, the pages are different and any custom stuff might not take into account the css/etc that the ide requires for, say, the drag & drop functionality. I’m not sure how it could generically do that.

Just my thoughts. I don’t speak for @anvil_central.

Yes I am using custom html css, though it is a bit disappointing to see such a large difference here.