Accessing app-bar node through python / javascript

Anvil Q&A
#1

What I’m trying to do:
I would like to access the properties of the app-bar. I need to get the height of the app-bar in order to set the height of a component within my form content such that the total height does not exceed screen height

What I’ve tried

Python:

app_bar = anvil.js.window.document.getElementsByClassName("app_bar")
app_bar.clientHeight

Javascript:

var set_height = function (){
    var center=document.getElementsByClassName('center');
    var app_bar=document.getElementsByClassName("app_bar").item(0);
    var app_bar_height = 0
    var window_height=window.innerHeight;

    console.log(`App Bar Type: ${typeof(app_bar)} object: ${app_bar}`)
    if (typeof(app_bar) != 'undefined' && app_bar != null)
    {
      app_bar_height = app_bar.clientHeight
    };
    
//     console.log(`App Bar: ${app_bar_height}, Window: ${window_height}`)
    var vert_height = window_height - app_bar_height
    console.log(`Set Height to: ${vert_height}px`)
    try {
      center.style.height = `${vert_height - 200}px`
    }
    catch (e) {
    }
  };
  
  window.onload = set_height
  window.onresize = set_height
1 Like
#2

What about using a role to set the height of the component you want to fill the content panel?

#3

You can adjust the height of the app bar without leaving Python using anvil.js.window

from anvil.js.window import document
document.getElementsByClassName("app-bar")[0].style.minHeight = "100px"
2 Likes
#4

I was hoping to fetch the current height without having to modify it?

#5

You can get the height of any dom node using ‘offsetHeight’ property

print(document.getElementsByClassName('app-bar')[0].offsetHeight)
#6

Yeah, the problem I was having is that it kept returning None

document.getElementsByClassName('app-bar')[0]

So any time I tried to get

.offsetHeight or .clientHeight

It would throw an error.

#7

Are you trying to run this code before the form opens? Because it seems to be working fine for me

Here is a Clone link demonstrating it

https://anvil.works/build#clone:N7XXFZROAIIXQW4S=FX5NZCC6YBGVI4KZJEFKOXAM

1 Like
#8

If I recall, I tried it both in the init of the form class and in a form_show event function. I will say that it did work for a short time and then stopped? It was very confusing. I have since moved on but would like a robust solution for any future endeavors.

#9

I was also trying it in a Custom HTML form. Perhaps that had something to do with it?

#10

A Custom HTML does not have any app bar in it. Have you added that form as a custom component to a standard page?

#11

Yes, the goal I was trying to achieve was to create a custom form that could be placed in the Main form content_panel and fill the remaining screen and center its contents.

#12

Then a Custom HTML should also be able to get the height of the app-bar. I updated the clone link to demonstrate it.

https://anvil.works/build#clone:N7XXFZROAIIXQW4S=FX5NZCC6YBGVI4KZJEFKOXAM

3 Likes
#13

That does seem to be working! Thanks. I think I may use a xy_panel too to achieve my goal. Thanks for the help!

2 Likes