Scrollable panel group in scriptUI

Enthusiast ,
Mar 06, 2020 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();

 

TOPICS
Scripting

Views

780

Likes

translate

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
community guidelines

correct answers 1 Correct Answer

Participant , Mar 10, 2020 Mar 10, 2020
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; sc...

Likes

translate

Translate

Translate
Participant ,
Mar 10, 2020 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

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
community guidelines
Enthusiast ,
Mar 10, 2020 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

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
community guidelines
Enthusiast ,
Jun 17, 2020 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

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
community guidelines
Adobe Community Professional ,
Jun 18, 2020 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

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
community guidelines
Enthusiast ,
Jun 21, 2020 Jun 21, 2020

Copy link to clipboard

Copied

Thank you all for trying to help.

 

Likes

translate

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
community guidelines
Participant ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

Very nice result. Would you mind sharing the code of the scrollable part? 

Likes

translate

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
community guidelines