Styling of Droplists

Does anyone know a way to customize the style of the actual pop-up list that appears when you click to change the value of a droplist?

I’m not averse to a bit of JavaScript embedding if that’s what it takes…

You want to style the dropdown’s appearance? You could probably hack that in with js injection and I’d love to see how you do that.

Personally, I just use a repeater inside a dyn panel set to scroll horizontally for the dropdown options. This won’t use standard HTML controls but it is easier to deal with.

For the “closed control” I just use a rectangle with text in it and a caret icon (and possibly another rectangle around the icon depending on what style you want. When you click the rectangle, the options Show as a Lightbox with a transparent bg color.

You’ll have to set extra interactions for what to do with the selections:

  • If it’s important that the selected option be highlighted in the options, you’ll need a Selected column that controls whether the item is selected and of course the Selected style will need to be set.
  • In addition, when you click a specific option, you’ll need to grab the [[Item.Name]] (or whatever column holds the label) and Set the Text of the closed control to that and then hide the options panel.
    • or if that’s not really important, you can just pick a generic label like “Selected Item Label” and use that
  • if you intend for the dropdown selection to go somewhere, you can set a column in the repeater to use to store Page References (right-click the cell)
    • on Click, Open URL, Set to Value = [[Item.Destination]] (or whatever name you use)

I think there may be other interactions required but that’s the main ones, let me know if you run into any weirdness and I’ll see how I can help.

Yup - done that before (or something very much like it) - I’m just trying to do the “quick” option, but finding those default white droplists rather jarring with the “dark” theme of this app.

Would be good to fix if JS injection possible, but I’m no longer steeped in it, so don’t have time to go down the rabbit-hole of discovery, although happy to patch it in, if anyone’s got a working example?..

I think the web font method works still, I believe that’s what Axure.Ex used. Some of that project still worked when I tried it a few months ago, but a bunch of it was broken. Which made sense since it’s made for RP8.

A more recent project I’ve played with is axlib, it has a bunch of functions it seems for interacting with prototypes through js. Perhaps there’s something useful for you in there.

Docs are in Chinese. Google translate helped me understand enough.