`max` policy for height and width not using empty space

Panel
1

I’m building an app based on the React template and I’m having trouble filling up the available space. As you can see, the map is not even remotely taking up all available space.

image
image1909×1079 234 KB

I’ve set pn.config.sizing_mode='scale_both' and set the height_policy and width_policy to ‘max’ on the map’s container (a pn.Card()) . No luck!

import holoviews as hv
import panel as pn
import param

hv.extension('bokeh',logo=False)
pn.extension()
pn.config.sizing_mode = 'scale_both'

class Mapview(param.Parameterized):
    
    tiles         = hv.element.tiles.CartoEco()
      
    def show_map(self):
        self.tiles.opts(
            hv.opts.Tiles(
                xlim=(-20037508,20037508),
                ylim=(-9608371,19071868),
                responsive=True, 
                show_grid=False,
                xaxis=None,
                yaxis=None)
        )
        return self.tiles
    
class App(param.Parameterized):
    
    app = pn.template.ReactTemplate(title='ReactTemplate App')
    
    mapview = Mapview()
    
    def view(self):
        
        self.app.sidebar.append('Some other stuff goes here')
        
        self.app.main[:4, :6] = pn.Card(
            self.mapview.show_map, 
            title='Map', 
            height_policy='max',
            width_policy='max')
        
        return self.app.show()

app = App()
app.view()

Package versions are:
Panel = 0.11.0
Param = 1.10.1
Holoviews = 1.14.2

How can I get the map to fill all of that empty space while still maintaining the flexibility to shrink if the user resizes? I can manually drag the map with my mouse to fill the space but I don’t want users to have to do that.

2

The react grid is defined with 12 columns and each row takes by default row_height = 150 px. You can take all the available width with something like self.app.main[:6, :12] in your code. The available height in the user monitor is not possible to be known, then in this case, the map will take 6*150 = 900 px. You can change the row height to the value you want, but it is not adaptative .

image
image2112×976 380 KB

1 Like
3

Of course! I read the docs and even copied the grid slice main[:4, :6] from the docs and then I promptly forgot and got buried in the various size/height/width parameters. Thanks @nghenzi!

1 Like