Removing Combo Box Arrows

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

  • 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] = ["Item 1", "Item 2", "Item 3"];
    // Define a paint routine that draws the currently selected text
       g.setFont("Default", 12.0);
       g.drawText([this.getValue()], [0, 5, this.getWidth(), 12]);
    // Define a callback behaviour when you select a popup menu...
       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

  • 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.

Log in to reply