Scrolling possibility in tabs

[DogPlanner GSS]

Dear Developers,

Could you tell us pls is it possible to realize scrolling effect in the tabs pages?

We have main layout and two tabs inside it with layouts also (with different buttons, texts and even horizontal layouts):

 var layRec = app.CreateLayout("Linear", "VLeft");

 tabsRecord = app.CreateTabs( "New...,Saved", -1, -1, "FillX" );

 layRec.AddChild( tabsRecord ); 

 calendarLay = tabsRecord.GetLayout( "New..." );

...

calendarLay.AddChild( ChoosenDate );
calendarLay.AddChild( HolidayDate );
calendarLay.AddChild( CurrentPet);
calendarLay.AddChild( EventType );
calendarLay.AddChild( EventTime );
calendarLay.AddChild( EventDescription );
calendarLay.AddChild( NotificationReminder );        
layHoriz.AddChild( eventSaveBtn );
layHoriz.AddChild( calendarEventCloseBtn );
layHoriz.AddChild( eventPrevBtn );
layHoriz.AddChild( eventNextBtn );          
calendarLay.AddChild( layHoriz );

...

recordLay = tabsRecord.GetLayout( "Saved" );

...

layHoriz.AddChild(reminderTxt[reminderNum]);
layHoriz.AddChild(removeDateBtn[reminderNum]);
recordLay.AddChild( layHoriz );

... 

Now we need to insert in our program:

        scroll = app.CreateScroller (1.0, 1.0);

With scrolling effect of tabs pages. We tried different places and options but nothing help us with this issue.

Thank you very much in advance!

Have a nice day.

Best regards

Dmitry

[Alan Hendry]

HI,

You should be able to create a scroller, add it to the tab layout (calendarlay), then add the controls to the scroller.

Separate scroller for other tab (recordlay).

You may to adjust the size of top layout, tabs, scroller, etc

(fillx, filly, fillxy, 0 to 1, etc)

Regards, Alan H

[DogPlanner GSS]

Dear Alan,

thank you very much for answer! We will try to realize this.

Have a nice day and coming weekend.

Best regards

Dmitry

среда, 27 мая 2026 г. в 23:57:21 UTC+3, hendr...@gmail.com:

[Jumar]

Hi

You need to have a scroller added to the tab layout. Then, add another layout into the scroller where you need to add your controls. You can set the direction of scroller by passing Vertical or Horizontal or leave out to scroll both horizontally and vertically.

Try this code below.

Note: I only add scroller to the first layout "New..." tab.

function OnStart()

{

var layRec = app.CreateLayout("Linear", "VCenter,Left");

tabsRecord = app.CreateTabs( "New...,Saved", -1, -1, "VCenter");

layRec.AddChild( tabsRecord );

calendarLay = tabsRecord.GetLayout( "New..." );

calendarScroll = app.AddScroller(calendarLay, 0.5, 0.5, "Vertical")

scrollLay = app.CreateLayout("Linear", "VCenter")

scrollLay.SetSize(0.5, -1)

calendarScroll.AddChild(scrollLay)

// add a very long text to scroller layout

var txt = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi`

app.AddText(scrollLay, txt, 0.5, -1, "Multiline")

// create the same for second tab layout

savedLay = tabsRecord.GetLayout( "Saved" );

savedLay.SetBackColor("red");

app.AddLayout(layRec);

}

Regards

[DogPlanner GSS]

Dear Jumar,

this is perfect that you attached the example of scrolling for tabs case! Thank you very much for this.

Have a nice day.

Best regards

Dmitry

суббота, 30 мая 2026 г. в 16:40:05 UTC+3, Jumar:

[DogPlanner GSS]

Dear Developers,

We add the scrolling function to the tabs. One thing we note it is needed to add the less size for Scroller to make all components visible when scrolling. If we write (1.0,1.0) sizes to the "CreateScroller" -> the last line remains unavailable on the screen.

The working option:

        // The main layout

        layDate = app.CreateLayout("Linear", "VTop, FillXY");

        //Create 2 tabs
        tabsRecord = app.CreateTabs( "Events...,Mode...", 1, 1, "FillXY" );
        layDate.AddChild( tabsRecord );

        //Add components to the first tab
        calendarLay = tabsRecord.GetLayout( "Events..." );         
   

        // Our scroller for the 1st tab
        calendarScroll = app.CreateScroller(1.0, 0.8);
        calendarLay.AddChild(calendarScroll);
        scrollLay = app.CreateLayout("Linear", "VCenter");
        calendarScroll.AddChild(scrollLay);        
     
        .... // Our first tab screen components (text fields, buttons etc.)
     
        scrollLay.AddChild( ChoosenDate );
        scrollLay.AddChild( HolidayDate );
        scrollLay.AddChild( whatForThisDateTxt );
        scrollLay.AddChild( newToThisDateTxt );        
        scrollLay.AddChild( CurrentPet);
        scrollLay.AddChild( EventType );
        scrollLay.AddChild( EventTime );
        scrollLay.AddChild( EventDescription );
        scrollLay.AddChild( NotificationReminder );
       
        layHoriz = app.CreateLayout( "Linear", "Horizontal");  
 

        ... // Our control buttons in one horizontal line

        layHoriz.AddChild( eventSaveBtn );
        layHoriz.AddChild( calendarEventCloseBtn );
        layHoriz.AddChild( eventPrevBtn );
        layHoriz.AddChild( eventNextBtn );          

        scrollLay.AddChild( layHoriz );
                                                                                                                                                                              
        layDate.AddChild( calendarLay );
       
        //Add components to the second tab
        modeLay = tabsRecord.GetLayout( "Mode..." );

       ... // Our components for second tab

        layDate.AddChild( modeLay );        
        app.AddLayout(layDate);

This option is worked well.

Thank you very much for help!

Best regards

Dmitry

суббота, 30 мая 2026 г. в 17:01:52 UTC+3, DogPlanner GSS:

[Jumar]

Hi.

The last part being invisible is because of the tab header at the top. If you pass 1 as a height for the scroller, it means the entire screen height. But you already have a tab header occupying some space at the top making your scroller pushed down at the bottom.

Instead of passing constant value as the height of the scroller, try this trick to set the scroller height to make sure everything is perfect across devices.

calendarScroll = app.CreateScroller(1.0, 1-tabsRecord.parent.layTop.GetHeight());

Regards

[DogPlanner GSS]

Dear Jumar,

thank you very much! We will try your option.

One more thing we want to ask concerning this issue. Now we have srolling with different components and at the bottom we have horizontal line with 4 buttons.

Is it possible to place this line with buttons at the bottom of the screen but outside the scrolling area? It is needed to see buttons all the time without having to scroll the screen to access them.

Thank you very much in advance.

Have a nice day.

Best regards

Dmitry

воскресенье, 31 мая 2026 г. в 05:10:31 UTC+3, Jumar:

[Jumar]

Just add the horizontal layout in the calendarLay and decrease the height of the scroller.

function OnStart()
{
var layRec = app.CreateLayout("Linear", "VCenter,Left");
   

    tabsRecord = app.CreateTabs( "New...,Saved", 1, 1, "VCenter");

    layRec.AddChild( tabsRecord );

    calendarLay = tabsRecord.GetLayout( "New..." );
   

    var scrollHeight = 1-tabsRecord.parent.layTop.GetHeight()-0.1
    calendarScroll = app.AddScroller(calendarLay, 1, scrollHeight, "Vertical")

    scrollLay = app.CreateLayout("Linear", "VCenter")

    scrollLay.SetSize(1, -1)

    calendarScroll.AddChild(scrollLay)
   
    // add a very long text to scroller layout

    var msg = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi`
    var txt = app.AddText(scrollLay, msg, 1, -1, "Multiline")
    txt.SetTextSize(30)
   
    var btmLayHoriz = app.AddLayout(calendarLay, "Linear", "VCenter,Horizontal")
    btmLayHoriz.SetSize(1, 0.1)
   
    app.AddButton(btmLayHoriz, "Button1")
    app.AddButton(btmLayHoriz, "Button2")
    app.AddButton(btmLayHoriz, "Button3")

   
   
    // create the same for second tab layout
    savedLay = tabsRecord.GetLayout( "Saved" );
    savedLay.SetBackColor("red");
   
    app.AddLayout(layRec);
}

[DogPlanner GSS]

Dear Jumar,

thank you very much for detailed answer with the program example! Now it will work how we need:)

Have a nice day.

Best regards

Dmitry

понедельник, 1 июня 2026 г. в 04:09:44 UTC+3, Jumar: