Removing Combo Box Arrows



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


  • administrators

    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



  • 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
 

3
Online

343
Users

1.1k
Topics

7.1k
Posts

Looks like your connection to Forum was lost, please wait while we try to reconnect.