ScrollContainer (FeathersUi) is not showing scrollbars

Haxe
#1

This is the build. The output is not showing the scrollbars.
http://67.209.127.195/code-bits/haxe-openfl/feathersui-scrollcontainer/

Here is the code I am using

package myapp;
import flash.Lib;
 
 import openfl.events.*;
import feathers.controls.ScrollContainer;
import feathers.controls.Application;
import feathers.layout.AnchorLayout;
import feathers.layout.AnchorLayoutData;
   
class Main extends Application 
{
 
 
 public var scs:ScrollContainerScreen ;

	public function new() {
		super();
	}

	 
	override private function initialize():Void 
	{
		 
  	 scs = new ScrollContainerScreen();
   	 this.addChild(scs);
 }
}

package myapp;

import feathers.layout.VerticalLayout;
import feathers.skins.RectangleSkin;
import feathers.controls.Button;
import feathers.controls.Header;
import feathers.controls.Panel;
import feathers.controls.ScrollContainer;
import feathers.events.TriggerEvent;
import feathers.layout.AnchorLayout;
import feathers.layout.AnchorLayoutData;
import openfl.events.Event;

class ScrollContainerScreen extends Panel 
{
	private var container:ScrollContainer;

	override private function initialize():Void 
	{

		super.initialize();
		
		this.createHeader();

		this.layout = new AnchorLayout();

		var containerLayout = new VerticalLayout();
		containerLayout.gap = 10.0;
		containerLayout.setPadding(10.0);
		containerLayout.horizontalAlign = CENTER;

		this.container = new ScrollContainer();
		this.container.layout = containerLayout;
		this.container.layoutData = AnchorLayoutData.fill();
		this.addChild(this.container);

		for (i in 0...10) {
			var child = new RectangleSkin(SolidColor(0xff0000));
			child.width = 50.0 + Std.int(Math.random() * 50.0);
			child.height = 50.0 + Std.int(Math.random() * 50.0);
			this.container.addChild(child);
		}
	}

	private function createHeader():Void 
	{
		var header = new Header();
		header.text = "Scroll Container";
		this.header = header;

		var backButton = new Button();
		backButton.text = "Back";
		backButton.addEventListener(TriggerEvent.TRIGGER, backButton_triggerHandler);
		header.leftView = backButton;
	}

	private function backButton_triggerHandler(event:TriggerEvent):Void 
	{
		this.dispatchEvent(new Event(Event.COMPLETE));
	}
}
#2

Hello, it will be much more useful if you reach the discord server in the link below and forward your problem there.

#3

The reason there’s no scrollbars is because the height of the ScrollContainerScreen is not set, so it grows as large as the inner container’s height, hence there’s no scrollbars.

Either set scs.height to stageHeight or use a layout in your Application as well.

1 Like
#4

If you want to fill the entire width and height of stage, you can set scs.autoSizeMode = STAGE. This will also automatically resize your container if the stage resizes.

4 Likes