Skip to main content
Ps-Design
Known Participant
Apr 13, 2017 1:01 AM UTC
Answered

How to make a scrollbar work in a dialog box.

I have a dialog box containing a group with "16 radio button options". My goal is to pack it so it looks smaller. The best way I found it was by adding a scrollbar in the group of buttons, I searched and got a script but could not get it to work. Anyone have any ideas how to help me with this project? Any help is valid. Thank you...

var w = new Window ("dialog", "scrollbar");
     w.orientation = "row";  
  w.alignChildren = "top";  // insert this line
     w.location = [600,180]  
    var radio_group = w.add ('panel', [0,0,160,190],);
    var sbar = w.add ("scrollbar", [5,0,20,190]);
     
     radio_group.alignChildren = "left";
  radio_group.add ("radiobutton",[5, 10, 100,   0], "Alça e Interior Azul"); 
  radio_group.add ("radiobutton",[5, 35, 100,  0], "Alça e Interior Vermelho"); 
     radio_group.add ("radiobutton",[5, 60, 100,   0], "Alça e Interior Preta");
     radio_group.add ("radiobutton",[5, 85, 100,  0], "Alça e Interior Roso"); 
     radio_group.add ("radiobutton",[5, 110, 100, 0], "Do Tipo Toda Branca");
     radio_group.add ("radiobutton",[5, 135, 100, 0], "Do Tipo Toda Preta");
     radio_group.add ("radiobutton",[5, 160, 100, 0], "Do Tipo Pratiada"); 
     radio_group.add ("radiobutton",[5, 185, 100, 0], "Do Tipo Caneca Mágica");
     radio_group.add ("radiobutton",[5, 210, 100, 0], "Interior Azul");
     radio_group.add ("radiobutton",[5, 235, 100, 0], "Interior Roso");
     radio_group.add ("radiobutton",[5, 255, 100, 0], "Interior Verde");
     radio_group.add ("radiobutton",[5, 285, 100, 0], "Interior Vermelho");
     radio_group.add ("radiobutton",[5, 310, 100, 0], "Interior Preto");
     radio_group.add ("radiobutton",[5, 335, 100, 0], "Modelo dia dos Pais");
     radio_group.add ("radiobutton",[5, 360, 100, 0], "Caneca de Aluminio");
  radio_group.add ("radiobutton",[5, 385, 100, 0], "Modelo Simples");
   
    
    var btnGroup = w.add("group");
    btnGroup.orientation = "column";  
    btnGroup.add ('button', {x:90, y:125, width:80, height:25}, 'Ok', {name:'ok'});
    btnGroup.add ('button', {x:240, y:125, width:80, height:25}, 'Cancel', {name:'cancel'});
  // set dialog defaults 
  radio_group.children[0].value = true;
function selected_rbutton (rbuttons) {
  for (var i = 0; i < rbuttons.children.length; i++) {
  if (rbuttons.children.value == true) {
  return rbuttons.children.text; 
  }
  }
  }
     
  // Linkar com os Scrips.jsx
w.show ()
This topic is closed to new replies. Start a new post to keep the conversation going.
Chuck Uebele
Chuck UebeleCorrect answer
Community Expert
Apr 13, 2017 4:41 AM UTC
var dlg = new Window('dialog','Dropdown Sample');
var dropList = ["Alça e Interior Azul", "Alça e Interior Vermelho", "Alça e Interior Preta", 
"Alça e Interior Roso", "Do Tipo Toda Branca", 
"Do Tipo Pratiada", "Do Tipo Caneca Mágica", 
"Interior Azul", "Interior Roso", "Interior Verde", 
"Interior Vermelho", "Interior Preto", "Modelo dia dos Pais", 
"Caneca de Aluminio", "Modelo Simples" ];
dlg.dropDown = dlg.add('dropdownlist', undefined, dropList);
dlg.ok = dlg.add('button', undefined, 'Okay');
dlg.cancel = dlg.add('button', undefined, 'Cancel');
dlg.ok.onClick = function(){
    dlg.close()
    switch(parseInt(dlg.dropDown.selection)){
            case 0:   
            //code here   
            alert("Alça e Interior Azul");   
            break;   
        case 1:   
            //code here   
            alert("Alça e Interior Vermelho"); 
            break;   
        case 2:   
            //code here   
            alert("Alça e Interior Preta");   
            break; 
        }
    }
dlg.cancel.onClick = function(){dlg.close()}
dlg.show()
View reply

19 replies

Jarda Bereza
Jarda Bereza
Inspiring
Apr 13, 2017 5:45 PM UTC

I have same question, but I can't use dropdown because I already have many dropdowns.

I guess I should move panel position on scrollbar event or something similar.

Translate
Chuck Uebele
Community Expert
Chuck UebeleCommunity Expert
Community Expert
Apr 14, 2017 1:26 AM UTC

AFAIK, you can't add a scroll bar to the UI, unfortunately. That's why I'm using tabs now for mine:

Translate
tokuredit
tokuredit
Inspiring
Aug 7, 2018 6:50 PM UTC

Try this code. Works in CC2018. In CS6 works better ..

The dialog box can be resized using the mouse.

It was checked on Windows

var d = new Window("dialog", "Resizeable dialog", undefined, {resizeable: true, minimizeButton:true, maximizeButton: false, closeButton: true} );  
var w = 900;
var h = 500;
d.orientation = "column";    
d.margins = 0;
d.spacing = 0;
d.alignChildren = 'left';
with (ver_grp = d.add("group"))
    {
    orientation = "row";    
    alignment = 'fill';  
    margins = 0;
    spacing = 0;
    with (main_grp = add("group"))
        {
        orientation = "column";    
        alignment = "left"; 
        alignChildren = ["fill", "center"];
        margins = 20;
        spacing = 20;
        preferredSize = [w,h]
    
        with (add("group"))
            {
            orientation = "column";    
            add("edittext", undefined, "11111111111111111").alignment = "left";  
            add("edittext", undefined, "22222222222222222");  
            add("edittext", undefined, "33333333333333331");  
            add("edittext", undefined, "44444444444444444");  
            add("edittext", undefined, "55555555555555555");  
            add("edittext", undefined, "66666666666666666");  
            add("edittext", undefined, "77777777777777777");  
            }
        with (add("group"))
            {
            orientation = "row";    
            add("button", undefined, "Ok");  
            add("button", undefined, "Button 1");  
            add("button", undefined, "Button 2");  
            add("button", undefined, "Button 3");  
            add("button", undefined, "Button 4");  
            add("button", undefined, "Button 5");  
            }
        }
  
    s_ver = add("scrollbar", undefined, 0, 0, 500);  
    s_ver.preferredSize.width = 15;
    s_ver.stepdelta = 100;  
    s_ver.jumpdelta = 100;  
    }
s_hor = d.add("scrollbar", undefined, 0, 0, 500);  
s_hor.stepdelta = 100;  
s_hor.jumpdelta = 100;  
s_ver.onChanging = function ()
    {  
    main_grp.size=[w,h];
    main_grp.location[1] = -this.value;  
    d.layout.layout();
    }  
s_hor.onChanging = function ()
    {  
    main_grp.size=[w,h];
    main_grp.location[0] = -this.value;  
    d.layout.layout();
    }  
d.onShow = function()
    {
    d.onResizing();
    }
d.onResizing = function()
    {
    ver_grp.size[0] = d.size[0] - 20;
    ver_grp.size[1] = d.size[1] - 20;
    main_grp.size = ver_grp.size;
    main_grp.location[0] = -s_hor.value;  
    main_grp.location[1] = -s_ver.value;  
    s_ver.size[1] = d.size[1] - 20;
    s_hor.size[0] = d.size[0] - 20;
    this.layout.resize();
    s_hor.value = 0
    s_ver.value = 0
    }
ver_grp.size=[340,260];
d.show() 

Very good, I have not seen anything like it anywhere. I've always been curious and willing to understand how to do these windows that use scroll bars. r-bin you are a very friendly and helpful person with everyone here. Thanks for the above script!

Translate
Chuck Uebele
Community Expert
Chuck UebeleCommunity ExpertCorrect answer
Community Expert
Apr 13, 2017 4:41 AM UTC
var dlg = new Window('dialog','Dropdown Sample');
var dropList = ["Alça e Interior Azul", "Alça e Interior Vermelho", "Alça e Interior Preta", 
"Alça e Interior Roso", "Do Tipo Toda Branca", 
"Do Tipo Pratiada", "Do Tipo Caneca Mágica", 
"Interior Azul", "Interior Roso", "Interior Verde", 
"Interior Vermelho", "Interior Preto", "Modelo dia dos Pais", 
"Caneca de Aluminio", "Modelo Simples" ];
dlg.dropDown = dlg.add('dropdownlist', undefined, dropList);
dlg.ok = dlg.add('button', undefined, 'Okay');
dlg.cancel = dlg.add('button', undefined, 'Cancel');
dlg.ok.onClick = function(){
    dlg.close()
    switch(parseInt(dlg.dropDown.selection)){
            case 0:   
            //code here   
            alert("Alça e Interior Azul");   
            break;   
        case 1:   
            //code here   
            alert("Alça e Interior Vermelho"); 
            break;   
        case 2:   
            //code here   
            alert("Alça e Interior Preta");   
            break; 
        }
    }
dlg.cancel.onClick = function(){dlg.close()}
dlg.show()
Translate
    Ps-DesignAuthor
    Known Participant
    Apr 13, 2017 12:23 PM UTC

    It looks great! Nice work Chuck Uebele To be perfect, it would be nice to have the first item on the list appear when the dialog box opens. Thank you.

    In my script this is possible with this line:

    lista.selection = 0;
    Translate
    Chuck Uebele
    Community Expert
    Chuck UebeleCommunity Expert
    Community Expert
    Apr 13, 2017 2:22 PM UTC

    Yes you can do that. I normally do that also.

    Translate
    Chuck Uebele
    Community Expert
    Chuck UebeleCommunity Expert
    Community Expert
    Apr 13, 2017 2:59 AM UTC

    Rather than use radio buttons, if you have that many, you should use a drop down list.

    Translate
      Ps-DesignAuthor
      Known Participant
      Apr 13, 2017 4:09 AM UTC

      I found this simple model of Drop dow list:

      The problem is that every drop-down list I encounter, the event executes before confirming with the OK button. It would be interesting to choose the option, click ok and then the event.Chuck Uebele How do I change?

      var w = new Window ("dialog", "dropdownlist" );
      w.orientation = "column";
      w.alignChildren = "top";  
      //w.add ("statictext", undefined, "Intens:");
      var lista = w.add ("dropdownlist", undefined, [
      "Alça e Interior Azul",
      "Alça e Interior Vermelho", "Alça e Interior Preta",
      "Alça e Interior Roso", "Do Tipo Toda Branca",
      "Do Tipo Pratiada", "Do Tipo Caneca Mágica",
      "Interior Azul", "Interior Roso", "Interior Verde",
      "Interior Vermelho", "Interior Preto", "Modelo dia dos Pais", 
      "Caneca de Aluminio", "Modelo Simples"
      ]);
      var btnGroup = w.add ("group");
      btnGroup.orientation = "row";
      lista.selection = 0;
      btnGroup.add ("button",{x:240, y:125, width:60, height:25}, 'Cancel', {name:'cancel'});
      btnGroup.add ("button",{x:90, y:125, width:60, height:25}, "OK");
      btnGroup.alignment = "right";
      lista.onChange = function(){  
            switch(parseInt( lista.selection)){  
              case 0:  
                  //code here  
                  alert("Alça e Interior Azul");  
                  break;  
              case 1:  
                  //code here  
                  alert("Alça e Interior Vermelho"); 
                  break;  
              case 2:  
                  //code here  
                  alert("Alça e Interior Preta");  
                  break;          
              }      
          }  
      w.show ();
      Translate
      Chuck Uebele
      Community Expert
      Chuck UebeleCommunity Expert
      Community Expert
      Apr 13, 2017 4:26 AM UTC

      Don't put the code to do something in the onChange function for the dropdownlist. Add it to an onClick function for the Okay button.

      Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices