I’m trying to do some rapid prototyping (instead of actually building the entire app). To speed things up I have created a .jpg to represent what an asset inventory page/form will look like. I simply want to display the .jpg as the entire form/screen when the form inits, and I need it to be full resolution.
When I place a media object centered in a card panel, resolution gets chopped, and I can’t seem to get it to be full size regardless of the available options. I think I need to set attributes for this media object in code, which is fine.
I basically want to do the equivalent of “make the background of the form - the .jpg, period”
Seems like everything I’m reading and trying involves having a form init call a server function, etc. Surely I’m missing something as simple as “display this .jpg, full screen, in decent resolution”
Any/all help appreciated - deadline’s fast approaching
Update: DYING HERE people.
In Anvil, what is the simplest way to display one media object (a .jpg), so that it fills the entire screen ( not a centered small blurry picture that is clearly in some column with too much space on the right and left).
Hate to say it but, Anvil is AWESOME when it comes to more complex stuff, which is why I’m here. BUT, I’m wasting a lot of time - I can set a page background to an image in Wix in 30 seconds and it just works.
If you put an image control on a form, then set the display_mode to “fill_width”, does that not do it for you?
I just tried that here and it seemed to work for the limited full page graphics I have.
Alternatively you can use CSS. Let me know if the first option is no good and I’ll knock up some CSS for you, though tbh it’s 10pm here for me and probably won’t be tonight now.
1 Like
David seems correct. An image component with the “full width” option appears to fill the screen.
Here’s a clone:
https://anvil.works/build#clone:XTQDJDEJNIVHTWAY=GJ5GPLU5KBXQZKV3IOB7TZHB
Does this result in acceptable resolution for you?
I’m on my way home from work so I may not be able to jump back in for a while.
1 Like
I’ll test this - and I very much appreciate your willingness to help
Also,
If you use this CSS on a blank form, it also seems to work. Now that is a big Octocat.
html {
background: url(https://github.githubassets.com/images/modules/logos_page/Octocat.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Clone:
https://anvil.works/build#clone:CQACR5ONOKIEOQVX=B36O57XBWNZXJHRRJZKY7QSG
2 Likes
So placing my .jpg as a media object, centered, fill_width, is presenting me with this. Clearly I’m doing something wrong. I’ll try the other suggestions in response to my post. Again, greatest thanks to those willing to help.
Make sure to check “Full Width Row” in the image control’s properties (expand container properties section to see it, towards the bottom).
That might help.
4 Likes
BINGO - Full Width Row on the container properties did the trick. Now to return to trying to get my high-res .jpg to not be completely fuzzy such that the text is barely readable.
1 Like
