Change Inputs.select font size

Community Help
1

I asked this question some time ago: Increase width a select dropdown

I was able to modify the width of the visible dropdown with the width parameter. Great. But it seems like there is a upper limit to the size. In a Framework chunk I have something like this:

const bigLong = ["BOYER (RIVIERE) A 0,1 KM EN AVAL DU PONT DE TRAIN A SAINT-CHARLES DE BELLECHASSE", 
"CASCAPEDIA (PETITE RIVIERE) A 0.9 KM RIVE DROITE AVAL  PONT-ROUTE A SAINT-EDGAR", 
"SAINTE-MARGUERITE NORD-EST (RIVIERE) A 1,7 KM DE LA RIVIERE SAINTE-MARGUERITE", 
"COULONGE (RIVIERE) AU PONT TERRY-FOX QUI MENE AU CLUB DE GOLF DE PONTEFRACT", 
"ANGLAIS (RIVIERE DES) A 1,1 KM EN AVAL DU PONT-ROUTE A TRES-SAINT-SACREMENT", 
"MILLE-ILES (RIVIERE DES)  EN AVAL DU BARRAGE GRAND-MOULIN A DEUX-MONTAGNES", 
"LAKE OF THE WOODS WESTERN OUTLET ABOVE NORMAN DAM AND POWERHOUSE SITE NO.1", 
"LAKE OF THE WOODS WESTERN OUTLET ABOVE NORMAN DAM AND POWERHOUSE SITE NO.2", 
"LAKE OF THE WOODS WESTERN OUTLET ABOVE NORMAN DAM AND POWERHOUSE SITE NO.3", 
"LIEVRE (RIVIERE DU) A 2,2 KM EN AMONT DU PONT-ROUTE 311 A LAC-SAINT-PAUL"]
const reduceFont = view(Inputs.select(bigLong, {label: "Select a river", value: bigLong[0], width: 2000}))

Above a certain value of width, the dropdown doesn’t change. But really my actual issue is that the labels are too long and spill over the popup. So is there any way to reduce the font size in the popup? This text inside this popup:

image
image1540×454 97 KB

Can that font be reduced in any way?

2

The dropdown is a native element. Its styling capabilities differ from system to system and from browser to browser.

I would recommend to either adapt your text (e.g. lowercase it to save space), or to use radio buttons instead (e.g. via Inputs.radio).

3

Yeah I know that’s totally a reasonable suggestion. Unfortunately I am stuck with a super long string in this case.

4

With native select there’s no way to reduce the font size. You could replace the select with a Choices widget which would also give you a search box and a preview that can wrap lines.

5

Perhaps you could use the format option to modify the strings?

view(Inputs.select(bigLong, {
  format: (s) => {
    let w = s.split(" ");
    return `${w[0]} ... ${w.slice(-1)[0]}`;
  }
}))

Of course, that’s just one example output; it could be anything your want.

2 Likes