Highlighted

Scrollable panel group in scriptUI

Enthusiast ,
Mar 06, 2020

Copy link to clipboard

Copied

Any suggestions on how to make this work properly?

 

The code like it is, the maxvlue of scrollbar shows nothing and my array of items (which has 50 elements) shows up to #40. (PS: if I change my array's length to 30, for example, all items are shown, but there is still blank space at the bottom).

Any help will be appreciated.

 

 

var array = new Array (50);
var w = new Window("dialog" , "Scroll test");
w.maximumSize.height = 300;
var p = w.add("panel" , undefined , "Scroll group");
p.margins.top = 20;
p.maximumSize.height = w.maximumSize.height-30;
var g = p.add("group");
g.orientation = "column";
g.alignChildren = "left";
g.alignment = ["fill","bottom"];

for (var i=0; i<array.length; i++) {
    g.add("statictext" , undefined , "Item " + (i+1));
    }

var scrollBar = p.add("scrollbar");
scrollBar.stepdelta = 10;
scrollBar.maximumSize.height = g.maximumSize.height;

scrollBar.onChanging = function () {
    g.location.y = -1 * this.value;
    }

w.onShow = function() {
    scrollBar.size.height = p.size.height-10;
    scrollBar.size.width = 22;
    scrollBar.location = [p.size.width-22, 0];
//~     scrollBar.maxvalue = g.size.height - p.size.height + 15;
    scrollBar.maxvalue = g.size.height + 15;
    };

w.show();

 

Hello!
try this code:

var array = new Array (100);
var w = new Window("dialog" , "Scroll test");
var p = w.add("panel" , undefined , "Scroll group");
p.size = [100,500];

var g = p.add("group");
g.orientation = "column";
g.alignment = "left";
g.maximumSize.height = array.length*100

for (var i=0; i<array.length; i++) {
    g.add("statictext" , undefined , "Item " + (i+1));
    }

var scrollBar = p.add("scrollbar");
scrollBar.stepdelta = 10;
scrollBar.maximumSize.height = p.maximumSize.height;


scrollBar.onChanging = function () {
    g.location.y = -1 * this.value;
    }

w.onShow = function() {
    scrollBar.size = [20,p.size.height];
    scrollBar.location = [p.size.width-20, 0];
    scrollBar.maxvalue = g.size.height-p.size.height+20;
    };

w.show();

Topics

Scripting

Views

392

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Scrollable panel group in scriptUI

Enthusiast ,
Mar 06, 2020

Copy link to clipboard

Copied

Any suggestions on how to make this work properly?

 

The code like it is, the maxvlue of scrollbar shows nothing and my array of items (which has 50 elements) shows up to #40. (PS: if I change my array's length to 30, for example, all items are shown, but there is still blank space at the bottom).

Any help will be appreciated.

 

 

var array = new Array (50);
var w = new Window("dialog" , "Scroll test");
w.maximumSize.height = 300;
var p = w.add("panel" , undefined , "Scroll group");
p.margins.top = 20;
p.maximumSize.height = w.maximumSize.height-30;
var g = p.add("group");
g.orientation = "column";
g.alignChildren = "left";
g.alignment = ["fill","bottom"];

for (var i=0; i<array.length; i++) {
    g.add("statictext" , undefined , "Item " + (i+1));
    }

var scrollBar = p.add("scrollbar");
scrollBar.stepdelta = 10;
scrollBar.maximumSize.height = g.maximumSize.height;

scrollBar.onChanging = function () {
    g.location.y = -1 * this.value;
    }

w.onShow = function() {
    scrollBar.size.height = p.size.height-10;
    scrollBar.size.width = 22;
    scrollBar.location = [p.size.width-22, 0];
//~     scrollBar.maxvalue = g.size.height - p.size.height + 15;
    scrollBar.maxvalue = g.size.height + 15;
    };

w.show();

 

Hello!
try this code:

var array = new Array (100);
var w = new Window("dialog" , "Scroll test");
var p = w.add("panel" , undefined , "Scroll group");
p.size = [100,500];

var g = p.add("group");
g.orientation = "column";
g.alignment = "left";
g.maximumSize.height = array.length*100

for (var i=0; i<array.length; i++) {
    g.add("statictext" , undefined , "Item " + (i+1));
    }

var scrollBar = p.add("scrollbar");
scrollBar.stepdelta = 10;
scrollBar.maximumSize.height = p.maximumSize.height;


scrollBar.onChanging = function () {
    g.location.y = -1 * this.value;
    }

w.onShow = function() {
    scrollBar.size = [20,p.size.height];
    scrollBar.location = [p.size.width-20, 0];
    scrollBar.maxvalue = g.size.height-p.size.height+20;
    };

w.show();

Topics

Scripting

Views

393

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Explorer ,
Mar 10, 2020

Copy link to clipboard

Copied

Hello!
try this code:

var array = new Array (100);
var w = new Window("dialog" , "Scroll test");
var p = w.add("panel" , undefined , "Scroll group");
p.size = [100,500];

var g = p.add("group");
g.orientation = "column";
g.alignment = "left";
g.maximumSize.height = array.length*100

for (var i=0; i<array.length; i++) {
    g.add("statictext" , undefined , "Item " + (i+1));
    }

var scrollBar = p.add("scrollbar");
scrollBar.stepdelta = 10;
scrollBar.maximumSize.height = p.maximumSize.height;


scrollBar.onChanging = function () {
    g.location.y = -1 * this.value;
    }

w.onShow = function() {
    scrollBar.size = [20,p.size.height];
    scrollBar.location = [p.size.width-20, 0];
    scrollBar.maxvalue = g.size.height-p.size.height+20;
    };

w.show();

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
Mar 10, 2020

Copy link to clipboard

Copied

Great! Thanks!!!

I used a workaround, before your answer, setting the scrollGroup maximumSize.height to 9999. It worked too.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
Jun 17, 2020

Copy link to clipboard

Copied

Hello, all.

I'm stucked again on scrollable panel thing.

But now my panel is interactive. The user can add/remove rows and I want a scrollbar to navigate thru the panel when its height is, for example, > 300. Is it possible?

//=============================================================
//  Script by Luis Felipe Corullón
//  Contato: lf@corullon.com.br
//  Site: http://scripts.corullon.com.br
//=============================================================

app.doScript(main, ScriptLanguage.javascript);

function main() {
    myW();
    }
//=========
function myW() {
	var w = new Window("dialog" , "Script by LFCorullón");
	w.alignChildren = "left";
	var g = w.add("group");
	g.orientation = "column";
	
	var p1 = g.add("panel");
	p1.orientation = "column";
	p1.alignment = "fill";
	p1.alignChildren = "right";
	p1.margins.top = 10;
	p1.maximumSize.height = 250;
//=========
	var gGroup = p1.add("group");
	gGroup.orientation = "column";
	gGroup.alignChildren = "right";
	
	var g2 = gGroup.add("group");
	g2.orientation = "row";
	g2.alignChildren = "center";
	var dParaStyle_sel = g2.add("dropdownlist" , [0,0,100,22] , ["1" , "2" , "3"]);
	var dParaStyle_msp = g2.add("dropdownlist" , [0,0,110,22] , ["1" , "2" , "3"]);
	dParaStyle_msp.selection = 0;
	var dParaStyle_btns = g2.add("group");
	dParaStyle_btns.spacing = 5;
	var dParaStyle_plus = dParaStyle_btns.add("button" , [0,0,20,20] , "+");
	dParaStyle_plus.onClick = function () {
		addRow(gGroup , ["1" , "2" , "3"]);
		}
//=========
	function addRow(group , array) {
		gg = group.add("group");
		gg.alignChildren = "top";
		gg.ps = gg.add("dropdownlist" , [0,0,100,22] , ["1" , "2" , "3"]);
		gg.msp = gg.add("dropdownlist" , [0,0,110,22] , ["1" , "2" , "3"]);
		gg.msp.selection = 0;
		gg.btns = gg.add("group");
		gg.btns.spacing = 5;
		gg.btns.minus = gg.btns.add("button" , [0,0,20,20] , "-");
		gg.btns.minus.onClick = remRow;
		w.layout.layout(true);
		}
//=========
	function remRow() {
		this.parent.parent.parent.remove(this.parent.parent);
		w.layout.layout(true);
		}
//=========
	var btns = w.add("group");
	btns.orientation = "row";
	btns.alignment = "right";
	btns.add("button" , undefined , "OK");
	btns.add("button" , undefined , "Cancel");
//=========
//=========
	if (w.show() != 2) {
		alert(gGroup.children.length);
	    }
	}
//=========
//=========

Thanks in advance!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 18, 2020

Copy link to clipboard

Copied

A good alternative to a scrollabe panel is a multi-column list. Scrolling is handles automatically. Much easier to code.

 

Peter

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
Jun 21, 2020

Copy link to clipboard

Copied

Thank you all for trying to help.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...