Removing Combo Box Arrows

[d.healey]

Is there a way to hide or remove the combo box arrows?

[Christoph Hart]

Not directly (this seems to be a somehow exotic request), but there are two solutions to achieve this otherwise:

Put a Combobox into a parent component (a panel) which truncates the combobox

const var Panel = Content.addPanel("Panel", 0, 0);  
// [JSON Panel]
Content.setPropertiesFromJSON("Panel", {
  "width": 106,
  "itemColour": 0,
  "itemColour2": 0,
  "textColour": 0
});
// [/JSON Panel]

const var ComboBox = Content.addComboBox("ComboBox", 0, 0);
// [JSON ComboBox]
Content.setPropertiesFromJSON("ComboBox", {
  "bgColour": 0,
  "itemColour": 0,
  "itemColour2": 0,
  "parentComponent": "Panel",
  "items": "Item A\nItem B\nItem C"
});
// [/JSON ComboBox]

(The x,y coordinates of the ComboBox are relative to its parent component, so you can move around the panel without having to bother about its children.

Write a custom component (you can draw custom graphics for a panel using Javascript and add callback behaviour).

This is a rather complex topic, so I'd need to write a dedicated tutorial for this at some point. But here is a example implementation of a combobox style component written entirely in Javascript:

const var ComboBoxPanel = Content.addPanel("ComboBoxPanel", 10, 10);
// [JSON ComboBoxPanel]
Content.setPropertiesFromJSON("ComboBoxPanel", {
  "height": 20,
  "allowCallbacks": "Context Menu",
  "popupMenuItems": "Item1\nItem2\nItem3",
  "popupOnRightClick": false,
  "popupMenuAlign": true
});
// [/JSON ComboBoxPanel]

ComboBoxPanel.data.items = ["Item 1", "Item 2", "Item 3"];

// Define a paint routine that draws the currently selected text
ComboBoxPanel.setPaintRoutine(function(g)
{
   g.fillAll(0x22000000);

   g.setColour(Colours.white);
   g.setFont("Default", 12.0);
   g.drawText(this.data.items[this.getValue()], [0, 5, this.getWidth(), 12]);
});

// Define a callback behaviour when you select a popup menu...
ComboBoxPanel.setMouseCallback(function(event)
{
   if(event.result != 0)
   {
      this.setValue(event.result - 1); // stores the value
      this.changed(); // tells the script to execute the onControl callback with the new value
      this.repaint(); // runs the paint routine and repaints the component
   }
});

It has a pretty powerful graphic render engine with timer callbacks and mouse events, so basically you can create whatever component you need

[d.healey]

Thanks I'll try it out. I'm reusing some graphics from a Kontakt project which already includes an arrow for the drop down menus so the combobox one is not needed for this project, although I could edit the graphic to remove the arrow but I think it looks good in this context.