I’m using Material Design; on an empty Standard Page I have XYPanel within the main content_panel (Column Panel). The XYPanel width is set to 960, and yet get_width() returns 970 pixels. If I set the width to some higher number (i. e. 1920), the width remains the same at 970 pixels - that’s what the function says - and the end result on the display as well. The height is behaving as expected, as far as I see.
Is there any way to get the panel wider? I’m trying to match the screen resolution for a kiosk application.
Hi @tomaz.turk,
My best guess is that the width of the XYPanel is being limited by the container it’s inside – probably a ColumnPanel.
Try checking the full_width_row box for the XYPanel. (If it’s inside a sub-container, eg a Material Design card, then you’ll need to set full_width_row for that too).
2 Likes
Thanks for your immediate help! The solution works, of course. It’s worth to go through the documentation once in a while … 
Is there a way to set full_width_row programmatically on XYPanel? I looked for it in properties section of doc but the property does not exist? (Anvil Docs | anvil). I also want to be able to set the height/width of panel in percentage, is that possible? Something like XYPanel(height=“100%”, width=“100%”). I have code that puts a XYPanel into a LinearPanel, (leaving out width/height params) then adds a bunch labels in the XYPanel. When I run it, nothing displays. If however I go and make width/height params such as XYPanel(width=1024, height=1024), then it does display. width/height should automatically get determined? What am I doing wrong?
full_width_row isn’t an attribute on components but a keyword argument that you can pass to add_component when the container is a column panel.
Example usage in the docs.
Anvil Docs | Containers
You shouldn’t need to set the width. But you will need to set the height. In order for the XYPanel height to depend on the screen size you can use 50vh for 50% of the screen size (viewport height), adjusting the number as you need.
Using height='100%' won’t work because it’s 100% of its container’s height. And it’s container doesn’t have a height.
1 Like
Thanks a lot for the viewport height tip. I could not figure out why “100%” was not working. Is there a nice guide somewhere on using containers with regards to sizing things and container sizes, or examples of mock UIs built dynamically that one can leverage off? Mock UIs built using GridPanel etc for example, would be very nice. Anvil is great for building UI dynamically, and it’s nice that one does not have to know html/css for it, but the html/css escape is done by the anvil editor, which is not applicable when doing UI dynamically.