Unwanted StackNavigator ScrollBars

chatmurai74

Hi friends !
Since this is my first post here, allow me to introduce myself: I am Vincent, I live in France, I am fairly new to the Haxe / OpenFL / FeatherUI trio, although I have some AS3 experience that dates back to prehistoric times so I taught I could give a try to all this and the most I can say is that I am enjoying it a lot !

Because I have an exaggerated confidence in myself, after messing around with the code examples, I decided to dive straight into building a rider-management web/mobile app for an equestrian center using the Cairngorm micro architecture framework. Naturally, I'm facing difficulties that my rusty brain can hardly even imagine, but so far I've managed to get by on my own. That said, It's now clear I've reached my limited capacity and that I need help.

To be honest, I don't really understand how FeathersUI's component sizing system works, and more specifically I'm having problems with the StackNavigator. To sum up, scroll bars appear where there shouldn't be any as soon as I add the StackNavigator to the display list (even when StackNavigator is empty, by the way).

My StackNavigator instance is not added directly to the application's root, and here’s a diagram that summarizes the view architecture of my app…
diagram

…and a screen capture of the evil scrollbars:
scrolbars

Thanks a lot ! Any advice will be appreciated !

joshtynjala

The StackNavigator itself does not provide any scroll bars. Only the content currently displayed by the StackNavigator can provide them. Most likely, it is the ScrollContainer in your view architecture diagram that is displaying scroll bars. The container's width and height is being set by the StackNavigator. However, the content within the container must be larger in some way. Are you certain that the ScrollContainer contains only the LayoutGroup and ListView in the top left corner? You didn't add anything else?

chatmurai74

Hi Josh, thanks for your answer the thing is, even if I remove the content from the StackNavigator, the scrollbars still show up.
Here is how I instantiate the StackNavigator in My MainPanel class:

private function onCreationComplete(event:FeathersEvent):Void {
mh = new MainHeader();
header = mh;

  mf = new MainFooter();
  footer = mf;

  sn = new StackNavigator();
  sn.autoSizeMode = STAGE;
  //sn.addItem(StackItem.withClass("ridersScreen", RidersScreen));
  //sn.rootItemID = "ridersScreen";
  addChild(sn);

}

I must be making a mistake somewhere, but I don't see where...
If you find it more convenient, you can have a look at my Gitea rep : https://git.chezdouteau.fr/nekotoro/LPTCManager2026

joshtynjala

Okay, so I think the scroll bars belong to the outer Panel component instead. Most likely, the StackNavigator is sizing itself to fill the entire stage, which is its default behavior. That will be larger than the view port area of the Panel, so it will require scroll bars.

Basically, you just need to customize the dimensions of the StackNavigator. For instance, you could use AnchorLayout to the layout property of the Panel, and pass AnchorLayoutData.fill() to the layoutData property of the StackNavigator. Or you could use VerticalLayout and VerticalLayoutData, if you prefer.

chatmurai74

Thanks a lot Josh, you were right, I forgot to give the Panel a layout so I used an AnchorLayout and AnchorLayoutData.fill() on the StackNavigator and the scrollbars are gone !

By the way, you may have seen that I mostly use subclasses of components for convenience, and I always wonder if I should instantiate them into the CREATION_COMPLETE triggered method or into the overridden initialize() method ? What is the best practice regarding this ?

joshtynjala

When creating sub-components that cannot be replaced later, I usually do it in initialize(). It gets called before styles are applied, allowing the theme to access those sub-components, if necessary.

The CREATION_COMPLETE event is dispatched after initialization, the theme styles being applied, and the first full validation of the component. Ideally, all children should have been created before this event gets dispatched.

chatmurai74

Thank you for your answer, it makes sense !