How to change the window panel title size?

Question

I have created a script with a gui Window with groups and panels. My issue is when I fire the script either from After Effects or from the Extendscript Debugger, I can't see the whole title on my panel title. Below is a link to the image highlighting the error I am seeing.

https://drive.google.com/a/whirlpool.com/file/d/0B51dXC1EPNW7NGJHTUZtY1JKMVE/view?usp=sharing

Here is the original problem code below:

var myWin = (this instanceof Panel) ? this : new Window("palette", "Mozaik", undefined, {resizeable: true , maximizeButton: true});

var panelZero = myWin.add('panel', undefined, 'Define your Mozaik Size');
    panelZero.alignment = ['100','300'];
    panelZero.alignChildren = ['fill','fill'];
    sizePickGUI = panelZero.add('edittext', undefined, '100'); //sizePickGUI variable which is used as sizePick parameter in shape buillding functions
        sizePickGUI.value = 100;
       sizePickGUI.onChange = function(){
           this.value = this.text
        }
        sizePickGUIVal= sizePickGUI.value;

var panelOne = myWin.add('panel', undefined, 'Define Area');
    widthPickGUI = panelOne.add('edittext', undefined, '1000'); //widthPickGUI variable which is used as widthPick variable in shape building functions
        panelOne.alignment = ['100','fill'];
        panelOne.alignChildren = ['fill','fill'];
        widthPickGUI.value = 1000;
        widthPickGUI.onChange = function(){
            this.value = this.text
        }
        widthPickGUIVal = widthPickGUI.value;


    heightPickGUI = panelOne.add('edittext', undefined, '1000'); //heightPickGUI variable which is used as heightPick variable in shape building functions
        heightPickGUI.value = 1000;
        heightPickGUI.onChange = function(){
            this.value = this.text            
            }
            heightPickGUIVal = heightPickGUI.value



var groupTwo = myWin.add ('group', undefined, 'Shape Picker'); // Shape Picker GUI group
    groupTwo.add('statictext', undefined, 'Shape Picker');

    var square = groupTwo.add('radiobutton', undefined, 'Square'); //square radio button


    var triangle = groupTwo.add('radiobutton', undefined, 'Triangle');// triangle radio button


    var circle = groupTwo.add('radiobutton', undefined, 'Circle'); // circle radio button


var groupThree = myWin.add('group', undefined, 'Execute Mozaik'); // Execute Button GUI group
    var execute = groupThree.add('button', undefined, 'Build');





if (!(this instanceof Panel)) {
    myWin.center();
    myWin.show();
    //Setup Window sizing
    myWin.minimumSize = myWin.size;
    //myWin.preferredSize = [300,-1];
    //make the panel resizeable
    myWin.onResizing = myWin.onResize = function(){ this.layout.resize()};
}
else{
    myWin.layout.layout(true);
    myWin.preferredSize = [500,-1];

}

Answer 1

Okay I figured out why my panel text wasn't showing when ran as a ScriptUI. Adjusting the panel.margins value enabled me to add a bigger gap between the panel frame and it's children properties.

In this case panel.margins = 60; worked for me.

Here is the full source code. If you save it & run as a scriptUi, the panel title will show in it's entirety.

var myWin = (this instanceof Panel) ? this : new Window("palette", "Mozaik", undefined, {resizeable: true , maximizeButton: true});
    //myWin.orientation = 'row';

var panelZero = myWin.add('panel', undefined, 'Define your Mozaik Size');
    panelZero.preferredSize= [200, 50];
    panelZero.margins = 50;
    panelZero.alignment = ['100','300'];
    panelZero.alignChildren = ['fill','fill'];
    sizePickGUI = panelZero.add('edittext', undefined, '100'); //sizePickGUI variable which is used as sizePick parameter in shape buillding functions
        sizePickGUI.size = [80,18];
        sizePickGUI.value = 100;
       sizePickGUI.onChange = function(){
           this.value = this.text
        }
        sizePickGUIVal= sizePickGUI.value;

var panelOne = myWin.add('panel', undefined, 'Define Area');
    panelOne.margins = 45;
    widthPickGUI = panelOne.add('edittext', undefined, '1000'); //widthPickGUI variable which is used as widthPick variable in shape building functions
        widthPickGUI.size = [80,18];
        panelOne.alignment = ['100','fill'];
        panelOne.alignChildren = ['fill','fill'];
        widthPickGUI.value = 1000;
        widthPickGUI.onChange = function(){
            this.value = this.text
        }
        widthPickGUIVal = widthPickGUI.value;


    heightPickGUI = panelOne.add('edittext', undefined, '1000'); //heightPickGUI variable which is used as heightPick variable in shape building functions
        heightPickGUI.value = 1000;
        heightPickGUI.onChange = function(){
            this.value = this.text            
            }
            heightPickGUIVal = heightPickGUI.value



var groupTwo = myWin.add ('group', undefined, 'Shape Picker'); // Shape Picker GUI group
    groupTwo.add('statictext', undefined, 'Shape Picker');

    var square = groupTwo.add('radiobutton', undefined, 'Square'); //square radio button


    var triangle = groupTwo.add('radiobutton', undefined, 'Triangle');// triangle radio button


    var circle = groupTwo.add('radiobutton', undefined, 'Circle'); // circle radio button


var groupThree = myWin.add('group', undefined, 'Execute Mozaik'); // Execute Button GUI group
    var execute = groupThree.add('button', undefined, 'Build');





if (!(this instanceof Panel)) {
    myWin.center();
    myWin.show();
    //Setup Window sizing
    myWin.minimumSize = myWin.size;
    //myWin.preferredSize = [300,-1];
    //make the panel resizeable
    myWin.onResizing = myWin.onResize = function(){ this.layout.resize()};
}
else{
    myWin.layout.layout(true);
    myWin.preferredSize = [500,-1];

}