Extendscript how do i align my text to be above listbox - extendscript

Question

i want my text to be above each listbox however it seems not to align well
this is my text code
var t = Main.add("statictext", undefined, "Hello", {multiline:false});
t.text = "Solids with video co pilot";
t.graphics.foregroundColor = t.graphics.newPen (t.graphics.PenType.SOLID_COLOR, [0.0, 1.0, 1.0], 1);
t.graphics.font = ScriptUI.newFont ("Arial", "Bold", 30);
kindly assist me thank you.
var dialog = new Window("dialog");
dialog.text = "Dialog";
dialog.preferredSize.width = 380;
dialog.preferredSize.height = 520;
dialog.orientation = "column";
dialog.alignChildren = ["fill","top"];
dialog.spacing = 10;
dialog.margins = 16;
// TPANEL
// ======
var tpanel = dialog.add("tabbedpanel", undefined, undefined, {name: "tpanel"});
tpanel.alignChildren = "fill";
tpanel.preferredSize.width = 348;
tpanel.margins = 0;
// CLRTAB
// ======
var Main1 = tpanel.add("tab", undefined, undefined, {name: "clrTab"});
Main1.text = "Main1";
Main1.orientation = "column";
Main1.alignChildren = ["fill","top"];
Main1.spacing = 10;
Main1.margins = 30;
var Main = tpanel.add("tab", undefined, undefined, {name: "clrTab"});
Main.text = "Main";
Main.orientation = "column";
Main.alignChildren = ["fill","top"];
Main.spacing = 10;
Main.margins = 10;
// CLRTAB_LSTGRP
// =============
var clrTab_LstGrp = Main.add("group", undefined, {name: "clrTab_LstGrp"});
//clrTab_LstGrp.orientation = "row";
clrTab_LstGrp.alignChildren = ["left","center"];
clrTab_LstGrp.spacing = 10;
clrTab_LstGrp.margins = 0;
var t = clrTab_LstGrp.add("statictext", undefined, "Hello", {multiline:false});
t.text = "Create Solids";
t.graphics.foregroundColor = t.graphics.newPen (t.graphics.PenType.SOLID_COLOR, [0.0, 1.0, 1.0], 1);
t.graphics.font = ScriptUI.newFont ("Arial", "Bold", 30);
var listBoxxc_array = [
"Create 2 solids",
"Create Solid",
"Create Solid with fractual noise",
"Create Solid CC Particle World",
"Create Solid Particular",
"Solid With BCC Sphere",
"Solid With BCC Turbulence",
"Solid With BCC Bulge",
"Solid With BCC Tritone",
"Solid With BCC Fractal Noise",
"Solid With BCC Rays",
"Solid With BCC Rain",
"Solid With BCC Rock",
"Solid With BCC Snow",
"Solid With BCC Particle System",
"Solid With BCC Edge Lighting",
"Solid With BCC Light Zoom",
"Solid With BCC Rays Ring",
"Solid With BCC Rays Ripply",
"Solid With BCC Rays Streaky",
"Solid With BCC Rays Puffy",
"Solid With BCC Rays Wedge",
];
var listBoxxc = clrTab_LstGrp.add("listbox", undefined, undefined, {name: "listBoxxc", items: listBoxxc_array});
listBoxxc.preferredSize.width = 300;
listBoxxc.size = [340, 200];
var t = Main.add("statictext", undefined, "Hello", {multiline:false});
t.text = "Solids with video co pilot";
t.graphics.foregroundColor = t.graphics.newPen (t.graphics.PenType.SOLID_COLOR, [0.0, 1.0, 1.0], 1);
t.graphics.font = ScriptUI.newFont ("Arial", "Bold", 30);
var listBoxxb_array = [
"Create solid with element",
"Create solid with saber",
"Create solid with Vc orb",
"Create solid with Optical Flares",
"Create solid with Twitch",
"Create solid with heat Distortion",
];
var listBoxxb = Main.add("listbox", undefined, undefined, {name: "listBoxxb", items: listBoxxb_array});
listBoxxb.preferredSize.width = 300;
listBoxxb.size = [100, 130];
var listBoxxn_array = [
"Create Angle Control",
"Create Color Control",
"Create Checkbox Control",
"Create Layer Control",
"Create Point Control",
"Create Slider Control"
];
listBoxxb.size = [100, 130];
var listBoxxn = Main.add("listbox", undefined, undefined, {name: "listBoxxn", items: listBoxxn_array});
listBoxxn.preferredSize.width = 300;
// CLRTAB_BTNGRP
// =============
var clrTab_BtnGrp = Main.add("group", undefined, {name: "clrTab_BtnGrp"});
clrTab_BtnGrp.orientation = "row";
clrTab_BtnGrp.alignChildren = ["left","center"];
clrTab_BtnGrp.spacing = 10;
clrTab_BtnGrp.margins = 0;
var testBtn = Main.add("button", undefined, undefined, {name: "testBtn"});
testBtn.text = "Test";
var testBtn1 = Main.add("button", undefined, undefined, {name: "testBtn"});
testBtn1.text = "Test";
var testBtn2 = Main.add("button", undefined, undefined, {name: "testBtn"});
testBtn2.text = "Test";
var testBtn3 = Main.add("button", undefined, undefined, {name: "testBtn"});
testBtn3.text = "Test";
var testBtn4 = Main.add("button", undefined, undefined, {name: "testBtn"});
testBtn4.text = "Test";
var testBtn5 = Main.add("button", undefined, undefined, {name: "testBtn"});
testBtn5.text = "Test";
var testBtn6 = Main.add("button", undefined, undefined, {name: "testBtn"});
testBtn6.text = "Test";
// GENTAB
// ======
var genTab = tpanel.add("tab", undefined, undefined, {name: "genTab"});
genTab.text = "Solids";
genTab.orientation = "column";
genTab.alignChildren = ["left","top"];
genTab.spacing = 10;
genTab.margins = 10;
var clrTab = tpanel.add("tab", undefined, undefined, {name: "clrTab"});
clrTab.text = "Effects Fast";
clrTab.orientation = "column";
clrTab.alignChildren = ["fill","top"];
clrTab.spacing = 10;
clrTab.margins = 10;
var clrTab = tpanel.add("tab", undefined, undefined, {name: "clrTab"});
clrTab.text = "Comp Settings";
clrTab.orientation = "column";
clrTab.alignChildren = ["fill","top"];
clrTab.spacing = 10;
clrTab.margins = 10;
var clrTab = tpanel.add("tab", undefined, undefined, {name: "clrTab"});
clrTab.text = "Comp Settings2";
clrTab.orientation = "column";
clrTab.alignChildren = ["fill","top"];
clrTab.spacing = 10;
clrTab.margins = 10;
var clrTab = tpanel.add("tab", undefined, undefined, {name: "clrTab"});
clrTab.text = "More";
clrTab.orientation = "column";
clrTab.alignChildren = ["fill","top"];
clrTab.spacing = 10;
clrTab.margins = 10;
// TPANEL
// ======
//tpanel.selection = clrTab;
tpanel.selection = Main;
dialog.show();

Answer 1

It appears as though you just need to set orientation of clrTab_LstGrp to be column. Like so:
clrTab_LstGrp.orientation = "column";
I've also noticed that you have a bunch of tabs all with the same variable name, clrTab. You will want to give those separate names before you try to add contents to them. Otherwise, it you will only be able to add to the last one.
Another thing is that you've created a group called clrTab_BtnGrp. But you're still adding your buttons to Main. Did you want to add your buttons to this group? If so you need to do this:
var testBtn = clrTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn"});
[EDIT]
I took a bit of time to clean up your code. A lot of what I've done is just for aesthetics or to align more properly with standard coding conventions. However, there were issues with your code that I would say needed some improvement. Such as reusing variable names, which shouldn't really be done unless the variable is no longer in use. An example of this is where you used the variable name t for each of your static-texts.
I also created groups that I thought made more sense.
var dialog = new Window("dialog");
dialog.text = "Dialog";
dialog.preferredSize.width = 380;
dialog.preferredSize.height = 520;
dialog.orientation = "column";
dialog.alignChildren = ["fill","top"];
dialog.spacing = 10;
dialog.margins = 16;
// TPANEL
// ======
var tpanel = dialog.add("tabbedpanel", undefined, undefined, {name: "tpanel"});
tpanel.alignChildren = "fill";
tpanel.preferredSize.width = 348;
tpanel.margins = 0;
// MAIN1 TAB
// ======
var Main1 = tpanel.add("tab", undefined, undefined, {name: "main_tab_1"});
Main1.text = "Main1";
Main1.orientation = "column";
Main1.alignChildren = ["fill","top"];
Main1.spacing = 10;
Main1.margins = 30;
// MAIN TAB
// ======
var Main = tpanel.add("tab", undefined, undefined, {name: "main_tab"});
Main.text = "Main";
Main.orientation = "column";
Main.alignChildren = ["fill","top"];
Main.spacing = 10;
Main.margins = 10;
// CREATE SOLIDS GROUP
var createSolidsGrp = Main.add("group", undefined, {name: "create_solids_group"});
createSolidsGrp.orientation = "column";
createSolidsGrp.alignChildren = ["fill","center"];
createSolidsGrp.spacing = 10;
createSolidsGrp.margins = 0;
var createSolidsTxt = createSolidsGrp.add("statictext", undefined, undefined, {multiline:false});
createSolidsTxt.text = "Create Solids";
createSolidsTxt.graphics.foregroundColor = createSolidsTxt.graphics.newPen (createSolidsTxt.graphics.PenType.SOLID_COLOR, [0.0, 1.0, 1.0], 1);
createSolidsTxt.graphics.font = ScriptUI.newFont ("Arial", "Bold", 30);
var listBoxxc_array = [
"Create 2 solids",
"Create Solid",
"Create Solid with fractual noise",
"Create Solid CC Particle World",
"Create Solid Particular",
"Solid With BCC Sphere",
"Solid With BCC Turbulence",
"Solid With BCC Bulge",
"Solid With BCC Tritone",
"Solid With BCC Fractal Noise",
"Solid With BCC Rays",
"Solid With BCC Rain",
"Solid With BCC Rock",
"Solid With BCC Snow",
"Solid With BCC Particle System",
"Solid With BCC Edge Lighting",
"Solid With BCC Light Zoom",
"Solid With BCC Rays Ring",
"Solid With BCC Rays Ripply",
"Solid With BCC Rays Streaky",
"Solid With BCC Rays Puffy",
"Solid With BCC Rays Wedge",
];
var listBoxxc = createSolidsGrp.add("listbox", undefined, undefined, {name: "listBoxxc", items: listBoxxc_array});
listBoxxc.size = [340, 200];
// SOLIDS WITH VIDEO COPILOT GROUP
var vidCopGrp = Main.add("group", undefined, {name: "create_solids_group"});
vidCopGrp.orientation = "column";
vidCopGrp.alignChildren = ["fill","center"];
vidCopGrp.spacing = 10;
vidCopGrp.margins = 0;
var vidCopTxt = vidCopGrp.add("statictext", undefined, undefined, {multiline:false});
vidCopTxt.text = "Solids with video co pilot";
vidCopTxt.graphics.foregroundColor = vidCopTxt.graphics.newPen (vidCopTxt.graphics.PenType.SOLID_COLOR, [0.0, 1.0, 1.0], 1);
vidCopTxt.graphics.font = ScriptUI.newFont ("Arial", "Bold", 30);
var listBoxxb_array = [
"Create solid with element",
"Create solid with saber",
"Create solid with Vc orb",
"Create solid with Optical Flares",
"Create solid with Twitch",
"Create solid with heat Distortion",
];
var listBoxxb = vidCopGrp.add("listbox", undefined, undefined, {name: "listBoxxb", items: listBoxxb_array});
listBoxxb.size = [100, 130];
// EXPRESSION CONTROLS GROUP
var expCtrlGrp = Main.add("group", undefined, {name: "create_solids_group"});
expCtrlGrp.orientation = "column";
expCtrlGrp.alignChildren = ["fill","center"];
expCtrlGrp.spacing = 10;
expCtrlGrp.margins = 0;
var expCtrlTxt = expCtrlGrp.add("statictext", undefined, undefined, {multiline:false});
expCtrlTxt.text = "Expression Controls";
expCtrlTxt.graphics.foregroundColor = expCtrlTxt.graphics.newPen (expCtrlTxt.graphics.PenType.SOLID_COLOR, [0.0, 1.0, 1.0], 1);
expCtrlTxt.graphics.font = ScriptUI.newFont ("Arial", "Bold", 30);
var listBoxxn_array = [
"Create Angle Control",
"Create Color Control",
"Create Checkbox Control",
"Create Layer Control",
"Create Point Control",
"Create Slider Control"
];
var listBoxxn = expCtrlGrp.add("listbox", undefined, undefined, {name: "listBoxxn", items: listBoxxn_array});
listBoxxn.size = [100, 130];
// CLRTAB_BTNGRP
// =============
var mainTab_BtnGrp = Main.add("group", undefined, {name: "main_tab_btn_group"});
mainTab_BtnGrp.orientation = "column";
mainTab_BtnGrp.alignChildren = ["fill","center"];
mainTab_BtnGrp.spacing = 10;
mainTab_BtnGrp.margins = 0;
var testBtn = mainTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn"});
testBtn.text = "Test";
var testBtn1 = mainTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn1"});
testBtn1.text = "Test";
var testBtn2 = mainTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn2"});
testBtn2.text = "Test";
var testBtn3 = mainTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn3"});
testBtn3.text = "Test";
var testBtn4 = mainTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn4"});
testBtn4.text = "Test";
var testBtn5 = mainTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn5"});
testBtn5.text = "Test";
var testBtn6 = mainTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn6"});
testBtn6.text = "Test";
// SOLIDS TAB
var genTab = tpanel.add("tab", undefined, undefined, {name: "genTab"});
genTab.text = "Solids";
genTab.orientation = "column";
genTab.alignChildren = ["left","top"];
genTab.spacing = 10;
genTab.margins = 10;
var effFastTab = tpanel.add("tab", undefined, undefined, {name: "effects_fast_tab"});
effFastTab.text = "Effects Fast";
effFastTab.orientation = "column";
effFastTab.alignChildren = ["fill","top"];
effFastTab.spacing = 10;
effFastTab.margins = 10;
var compSet1Tab = tpanel.add("tab", undefined, undefined, {name: "comp_settings_1_tab"});
compSet1Tab.text = "Comp Settings";
compSet1Tab.orientation = "column";
compSet1Tab.alignChildren = ["fill","top"];
compSet1Tab.spacing = 10;
compSet1Tab.margins = 10;
var compSet2Tab = tpanel.add("tab", undefined, undefined, {name: "comp_settings_2_tab"});
compSet2Tab.text = "Comp Settings2";
compSet2Tab.orientation = "column";
compSet2Tab.alignChildren = ["fill","top"];
compSet2Tab.spacing = 10;
compSet2Tab.margins = 10;
var moreTab = tpanel.add("tab", undefined, undefined, {name: "more_tab"});
moreTab.text = "More";
moreTab.orientation = "column";
moreTab.alignChildren = ["fill","top"];
moreTab.spacing = 10;
moreTab.margins = 10;
tpanel.selection = Main;
dialog.show();