How do I create a precise layout for my app components?

Anvil Q&A
1

I’m trying to make an anvil app that looks like my mock. It doesn’t need to be pixel-perfect but it should be close.

I’ve tried using different combinations of column panels and flow panels and editing their properties. This does not get me very close. There is still lots of space between components. I have also tried creating custom roles for each object and editing the css to specify line height, padding, etc. This works somewhat but is still limited. There is some amount of padding I can’t seem to get rid of. But even if I could, the process of creating a new theme for each component and switching back and forth to theme.css feels slow and tedious.

Here is a small section of my mock
image

I can only attach one media file to this post so I’ll attach an image of my attempt to recreate the above mock in anvil in a comment. You can also clone said attempt here

Is there a better way to layout components with more precision? My current workflow feels really slow and does not get me the results I want. I’ve seen XY panels mentioned in the documentation but not sure if that’s the right solution as the app will need to work on different screen sizes and I also don’t see that component in the toolbox. Should I just create a custom HTML form/template?

Thanks in advance for any help!

2

image

3

I did a lot of playing around with moving things, but it all centered on an anvil role that was basically just

{
width: fit-content;
}

https://anvil.works/build#clone:BVFSSUAHWT6GWQ54=U2Y6E2W3F566QUGYBFSSTST4

Oh yeah, and I made sure there was a spacer to the left.

2 Likes
4

Thanks @duncan_richards12 ! That’s a huge improvement. In general then, is fiddling around with properties and css until things look kindof right the only way to go about this? Or are there any other tips?

5

Mostly fiddling, but that fiddling is both moving anvil components and experimenting with CSS. Tips for CSS are hard to come by for a question so generic, since the number of problems CSS can solve is pretty numerous and the solutions just as numerous.

Though the one tip I could say for utilizing CSS is tutorials and Google/StackOverflow searches.

1 Like
6

It seems that you’re already familiar with HTML and CSS, so where precision and repeatability are important to you, this is probably the most expedient way to go.

Note that an HTML form is still a Python Form, so it can receive data from other Python objects when it needs to update.

1 Like
7

Thanks @p.colbert . So if i create an html form, and lets say in the html I include a header, is it possible to set the text content of that header from python?

8

Yes. See the very bottom of Forms as Components. You can read and write the entire HTML content.

It would probably help to isolate the parts, and distinguish those you want to be able to change from those you don’t. Then it’s a simple matter of string concatenation to get the full HTML.