How to force use of < > buttons in `panel.template.sidebar`

I’m working on an app using the ReactTemplate. The sidebar contains pn.Tabs where each tab has a pn.Card containing an instance of a class I wrote. This code will produce the unfinished example I’m working from.

import panel as pn
import param
import holoviews as hv
import pandas as pd
import geopandas as gpd


class Inputs(param.Parameterized):
    """Class providing widgets for selecting and configuring input datasets. """

input_file = param.FileSelector()
x_field    = param.Selector(doc='A field selector for longitude')
y_field    = param.Selector(doc='A field selector for latitude')
id_field   = param.Selector(doc='A field selector for the identifier')
data       = None

def __init__(self, init=False, **kwargs):
    super(Inputs, self).__init__(**kwargs)
    if init:

@param.depends('input_file', watch=True)
def update_inputs(self):
    """Method which auto-updates `self.x_field`, `self.y_field`, 'self.id_field', `` based
    on changes to `self.input_file`.
    if (self.input_file):
                                      # initialize with epsg 3857; coords converted to meters later  
        df                          = gpd.GeoDataFrame(pd.read_csv(self.input_file),
                                                       crs={'init': 'epsg:3857'})
        self.param.x_field.objects  = df.columns
        self.x_field                = df.columns[0]
        self.param.y_field.objects  = df.columns
        self.x_field                = df.columns[0]
        self.param.id_field.objects = df.columns
        self.id_field               = df.columns[0]                   = df

class App(param.Parameterized):

app = pn.template.ReactTemplate(title='ReactTemplate App')

inputs = pn.Tabs()
for n in range(0,5):
    if n == 0:
        inputs.append((f'Input {n+1}',pn.Card(Inputs(init=True), title = "Configure Input File")))
        inputs.append((f'Input {n+1}',pn.Card(Inputs(), title = "Configure Input File")))

def view(self):
    pn.config.sizing_mode = 'scale_both'
    # remove class name 'Inputs' from each instance
    for i in[0]:

demo = App()

The first time I run it the resulting sidebar looks like this:

Subsequent runs produce this, which is what I want:


How can I force the latter behaviour to get the < > scroll buttons? I’m curious as to why running the same code consecutively produces different results.

I have Panel version 0.11.0.

1 Like

Ah ha! After publishing my question I tried moving the pn.config.sizing_mode = 'scale_both' line and that solved it. When I remove that that config line up from my App class and put it at the top immediately after my imports it works as I expect.

1 Like

Looks great :+1:happy you found and shared the solution.