What I’m trying to do:
My form uses the available space when in development mode, but when I run the app it becomes compressed do to large margins on the left and right . See the image below.
I would like to make the margins reasonable say 10px. The
responsible for the margins appears to be the one with the classes “anvil-panel-section-container anvil-container-overflow belongs-to-KTKSBX”.
Thanks for any help provided.
What I’ve tried and what’s not working:
I made the form components “Full Width Row”.
If you do some forum searching on full width row, you’ll find that it’s tricky. To truly get something full width the entire nesting hierarchy of components must be set to full width (and if you’re using Anvil Extras routing, you need to use the full width parameter there, too).
It might be easier to fiddle with the CSS and roles to get the effect you want, although I say that as someone who can’t get CSS to do anything he wants.
I have spent at least 1.5 hours monkeying with CSS – thank god for python. I hate it and I have been working with it since its introduction in the 90s – its all fiddling around as far as I can see.
You could import jQuery from anvil.js.window and use the css method on the objects you want it applied to. This can be done by creating a jQuery object either with the raw Dom node or the appropriate css selectors.
But there is no way to debug this – the python code never produces errors and the javascript console, filled with debug info anyway, has no indicator that anything at all is happening with this code.
First question: Are you making those changes in the init function or the show function? You have to do any jQuery functionality after the DOM has completely loaded so it should be in the show event or later.
Second: Can you try to simplify your CSS selectors? It seems a little bit too complicated than what I would expect you would need.
For debugging I would recommend going into the console and using a bit of document.querySelectorAll to determine what the right selector is so that you know for sure that you have the right element(s).
Thank you - xpath is more like programming to me. If I can could have access to the page CSS this would be over in a flash. But since there are no IDs and every page has a the same css-classes it seems i am stuck with javascript.
JQuery is already included with Anvil. But you can do pretty much everything from vanilla Javascript that you can do from JQuery, if not as expressively.
Just an observation, if you want to affect the CSS of the form itself, not just the column panel inside the form, you can get the dom node of the form itself.
dm =anvil.js.get_dom_node(self)
From there you can use closest to go from the form toward the root of the DOM to get to higher level elements via a selector.
At that point, though, you might be better off making a copy of standard-page.html and just making your change in it, and making your form use that as its HTML base instead of mucking about changing CSS on the fly.
First I studied the anvil.js stuff (very little docs on anything javascript, jquery). I wrote a function and put it in the native library .
You will need script tags here – but it messes up the formatting –
function change_margins(component){
var html_element = component.v._anvil.element; // jQuery Object
html_element.attr('style','margin-left:10px;');
# The above does not get the correct element but it is in the ball park but not necessary except to use # the function as I found it in a forum listing.
the bottom jquery function does work. changing the left margin to 10px and increasing the max-wdith to 100% solved the problem
The next thing is to make this code only work on the right page. So in the Form where I wanted it to work I created the show_form function and added a simple call to the JS function from there:
anvil.js.call(‘change_margins’,self.primary_column) # i named the outside column primary_column. This does work too but it is unlikely you will have the correct form_element where you want to change something so this worked to 1) wait for the form to show before doing the jquery above - otherwise all pages would be changed.
Thank you jshaffstall and others above for guiding me to find a solution.
).