Scrollview not initialized yet

Webix JS
1

Hello together. I would like to ask, why this code snippet doesnt work in webix jet. In fact, it works, however its buggy. If i add a delay to “menu.scrollTo()” it seems to work, but it is not fluid anymore, because of this delay. Without the delay like here, sometimes it scrolls, sometimes it doesnt.

Someone could help please?
The goal is to display a saved state of scroll to apply it on init.

Greetings Sven

Code:

import { JetView } from ‘webix-jet’;

export default class MenuView extends JetView {
width(items) {
return (this.app.config.size - 1.7) / 4 * items.length;
}

config() {
    const user = this.app.getService('user').getUser();
    const { _ } = this.app.getService('locale');

    const itemConfig = {
        view: 'button',
        css: 'menu-button webix_danger',
        type: 'icon',
        click: (id) => {
            const buttonLabel = this.$$(id).config.labelBelowMenu;
            $$('active-label').setValue(buttonLabel);
            localStorage.setItem('activeMenuItem', buttonLabel); // Save active item to localStorage
            this.show(id);
        },
    };

    const user_items = [
        {
            ...itemConfig,
            id: 'start',
            icon: 'mdi mdi-cart',
            labelBelowMenu: _('newBooking'),
        },
        {
            ...itemConfig,
            id: 'help',
            icon: 'mdi mdi-help-circle',
            labelBelowMenu: _('help'),
        },
        {
            ...itemConfig,
            id: 'reservations',
            icon: 'mdi mdi-calendar',
            labelBelowMenu: _('myBookings'),
        },
        {
            ...itemConfig,
            id: 'profile',
            icon: 'mdi mdi-account',
            labelBelowMenu: _('profile'),
        },
    ];

    const admin_items = [
        {
            ...itemConfig,
            id: 'dashboard',
            icon: 'mdi mdi-view-dashboard',
            labelBelowMenu: _('dashboard'),
        },
        {
            ...itemConfig,
            id: 'settings',
            icon: 'mdi mdi-cog',
            labelBelowMenu: _('settingAdministration'),
        },
        {
            ...itemConfig,
            id: 'user',
            icon: 'mdi mdi-account-group',
            labelBelowMenu: _('userAdministration'),
        },
        {
            ...itemConfig,
            id: 'adminreservations',
            icon: 'mdi mdi-calendar',
            labelBelowMenu: _('bookingAdministration'),
        },
        {
            ...itemConfig,
            id: 'parkings',
            icon: 'mdi mdi-car',
            labelBelowMenu: _('parkingAdministration'),
        },
    ];

    if (user.role === 'ppv_admin') {
        user_items.push(...admin_items);
    }

    const menu = {
        view: 'scrollview',
        id: 'menu',
        scroll: 'x',
        cols: user_items,
        body: {
            padding: {
                left: -0.7,
            },
            width: this.width(user_items),
            cols: user_items,
        },
    };

    const ui = {
        rows: [
            menu,
            {
                view: 'label',
                id: 'active-label', // ID for the label
                height:20,
                label: 'No item selected', // Default label text
                css: 'menu-active-label',
                align: 'center', // Align the label to the center
            },
        ],
    };

    return ui;
}

init() {

const menu = $$(‘menu’)
menu.scrollTo(400,0)

}

}

2

Hello Sven_Lussmann,

To make the menu.scrollTo() work you can execute it in the ready method when the whole class is already initialized.

Please take a look at the example: Code Snippet

1 Like
3

Good evening miss Natalia,

Thanks for the fast response. Unfortunately, ive already tried this by myself, but it led to the same. Im trying hard since 2 days to get this small thing to work, but im not able to do it.

Im sorry, that i forgot to tell, that this only happens, when i reload the browser. Out of 10 Reloads, approximately 4-6 times the scrollState is at the right position and the rest it stays at position (0,0).

In your CodeSnippet, when i reload the browser it is applied every time. I also tried using the exact same code that you provided me, but result is the same… :frowning:
I use the baseApp from webixJet and just added the menu. Nothing else.

So that im able to fix it with:

init() {
webix.delay(() => {
const menu = $$(‘menu’);
console.log(menu);
menu.scrollTo(400,0)
},this,null,100); // Works till 10ms, then its also random scrollState
}

tells me, that this might be a code timing problem?
But when i fix it like this, the flow is destroyed totally, it feels awful…

Btw i also tried switching from webix-pro to other webix versions, but i ran into the same issue.

Also for tabbar im not able to scroll to the right position after browser reload, without a delay.

Any ideas how to fix this in a good way not a temporary solution with this delays, which destroy the flow?

Kind Regards
Sven Lussmann

4

Hello again Sven_Lussmann,

In your code :

init() {
webix.delay(() => {
const menu = $$(‘menu’);
console.log(menu);
menu.scrollTo(400,0)
},this,null,100); // Works till 10ms, then its also random scrollState
}

you get access to the menu view in a wrong way. In WebixJet views are defined as ES6 classes that inherit from the JetView class. So you can get access to the view via this.$$("menu"); instead of just $$("menu"); .

 init() {
    // left there in case this property is used anywhere else in class methods
    this.menu = this.$$("menu");
  }

And this.menu is initialized in the init method in case you can use it anywhere esle in the class.
Also note that in Webixjet to reference to some view you should use localId instead of id most of the time:

    const menu = {
      view: 'scrollview',
      localId: 'menu',
      scroll: 'x',
      body: {
        padding: {
          left: -0.7,
        },
        width: this.width(user_items),
        cols: user_items,
      },
    };

Please apply this changes and give a feedback if your problem is solved. If not we will try other ways.

5

Good Morning Natalia_Shilova.

I thought, i made it clear, that it WORKS with the delay (Even if i got the wrong view as you menntioned, but somehow it scrolls to the right pos)
init() {
webix.delay(() => {
const menu = $$(‘menu’);
console.log(menu);
menu.scrollTo(400,0)
},this,null,100); // Works till 10ms, then its also random scrollState
}

So for now, i ask again:
How can i apply the scrollTo() to the scrollview, WHEN the browser reloads?

This is my App (GitHub - captainhook23/webix_trouble).

You can start the frontend like in the README.md, so you are maybe able to reproduce this bug.
Also i’d like to mention, this has to be done with ChromeDevTools as Mobile or directly on a mobile phone to render the mobileApp.

Kind Regards
Sven Lussmann

6

Good Evening Natalia_Shilova.

I removed:

    webix.ui.fullScreen();

from my index.js:

webix.ready(() => {
let app;

// INIT THE APP
if (webix.env.mobile) {
    // INIT THE MOBILE APP
    webix.ui.fullScreen();
    console.log('%c MobileApp ', 'background:#f56042; color:black;');
    app = new MobileApp();
}

}

and the scroll works fine without the delay now. However i would not appreciate this solution, because on the mobile device I should use this right?

Edit:
I added:
import * as webix from ‘webix’;

in my index.js file.

And everything works, including webix.ui.fullScreen();
Im not a Javascript guy, but how is this possible, or whats going on?

I thought adding the webix.js file in the index.html would be the only thing to do. Also webix worked as expected with only importing it to the html file.

Could you explain this to me as a javascrept newbie? :slight_smile:

Kind Regards
Sven Lussmann

7

Hello @Sven_Lussmann

Thank you for sharing an example of the issue, it really helped with debugging.

scrollTo method simply changes the scrollLeft when called (here’s a source code on Github).
Jet views are initialized asynchronously, and also, browser rendering could be perceived as “async” (some good illustration here).
With that in mind, scrollLeft set in the middle of app rendering/resize might not be applied immediately.

But the main reason for the issue here is that webix.ui.fullscreen forces resizing with a 100ms delay (source code on Github) where it recalculates document.body.style.width. Unfortunately, this is an absolutely forced measure (timeouts are evil, I agree - but before adding this one, we did our best to avoid it).

I have tried to watch for the HTML onscroll event for the scrollview and it doesn’t even called if scrollTo is applied in the sequence from your Github repo. I would say that this indicates that browser wasn’t done with rendering and unfortunately, ditched these changes.

The most effective solution is to set the same timeout to app.render (can be applied only for mobile devices):

setTimeout(() => app.render(), 100);

In this case, even a 1ms timeout wasn’t necessary for scrollTo call in menu’s init.

Another option I tried is to call scrollTo when the TopView is ready, connecting them with an app-level event:

Click to expand the code block 
// views/top.js
ready() {
    this.app.callEvent("top:ready", []);
}
// components/menu.js
init() {
    const menu = $$('menu');
    // to watch scroll state in DOM
    webix.event(menu.$view, "scroll", () => {  
        webix.message(`menu.$view.scrollLeft ${menu.$view.scrollLeft}`, "debug");
    })
    this.app.attachEvent("top:ready", () => {
        // "standard" delay to complete rendering
        setTimeout(() => menu.scrollTo(400,0), 1);
    })
    // ... other code
}

But given the nature of the issue, this is just an unexpected workaround for achieving the same delay.

I have one explanation - different timing of execution. However, I have tested both versions and the issue kept appearing regardless of how webix.js was added (either on a mobile device or in Chrome DevTools on the PC), unless I added the mentioned delay.

1 Like
8

Hello @Listopad, good morning.

That was a fantastic explanation. Thank you very much.
I would never have guessed the setTimeout would solve it but i thought, theres a code race.

I struggled for days just for this 3 lines. You can not imagine, how happy I am right now.
Thank you very much for your effort.

Thread can be closed due to solved issue.

Kind regards
Sven Lussmann