Reflow issues

[linaspasv]

When setting a custom width for navigation panel there is an ugly reflow issue. I guess the main cause of this is because the custom width is set after config is loaded via ajax. To solve this I would suggest to apply some config settings directly in the template when everything is loaded first time.

If this could be addressed it would make a smoother loading and refreshing UI experience.

[williamdes]

When setting a custom width for navigation panel there is an ugly reflow issue. I guess the main cause of this is because the custom width is set after config is loaded via ajax. To solve this I would suggest to apply some config settings directly in the template when everything is loaded first time.

If this could be addressed it would make a smoother loading and refreshing UI experience.

I totally agree, this effect is ugly and this is even worse because the request is the last one that is not async in all the code-base.
I removed the console that was not async in #16590

[linaspasv]

To be honest, I am not sure why it's nessesary to load configuration via ajax in the first place. You could probably embed a JSON snapshot directly to a html template and allow javascript to read it from here. But for UI parts I would suggest to populate critical styles just before template is sent to a browser because loading JavaScript adds the delay in any case.

It's a very old issue to be honest. I have checked 4.9.0 and it is as bad as now.

[williamdes]

Can you download on our website the latest version in development (phpMyAdmin 5.1+snapshot) to try my changes ? :)

[linaspasv]

Can you download on our website the latest version in development (phpMyAdmin 5.1+snapshot) to try my changes ? :)

Hi, I am still seeing reflow issue.

I would suggest to change into this:

<div id="pma_navigation" data-config-navigation-width="{{ config_navigation_width }}" style="width: {{ config_navigation_width }}px">

This should solve reflow issue for the navigation sidebar.

[williamdes]

Can you download on our website the latest version in development (phpMyAdmin 5.1+snapshot) to try my changes ? :)

Hi, I am still seeing reflow issue.

I would suggest to change into this:

<div id="pma_navigation" data-config-navigation-width="{{ config_navigation_width }}" style="width: {{ config_navigation_width }}px">

This should solve reflow issue for the navigation sidebar.

I tried it and the effect still exists, could you confirm that it improves the UI for you ?

[linaspasv]

@williamdes I did took some time and looked deeper.

Styles underlined in red are key places where we would need to pre-calculate / populate inline styles before outputing template. If it is done, reflow issues in navigation, menu bar, ... should be resolved.

p.s. {{ config_navigation_width }} is 301 in my example.

[williamdes]

Thank you for taking time to debug this, I would say that there is two different issues in one:

• a reflow issue before JS init code
• a reflow issue after JS init (now solved by my patch)

The issue before could be fixed but adding inline styles is an ugly solution.
Would you mind posting a GIF of your screen so I can have an idea of how bad this is on your side ?

[linaspasv]

For me after JS init did not change anything. I mean it might slightly improved things but the main cause is before JS init. It's pretty bad. I would close my eyes to the "ugly solution" if it makes reflow gone, lol :-)

screen-capture.mp4

[williamdes]

Could you open a new issue for that please ?
(with the video)

[williamdes]

By the way I just checked and I agree this issue still exists in a less worse way, tried on https://phpmyadmin-dev.wdes.eu.org/ (root/public public/public)

[linaspasv]

By the way I just checked and I agree this issue still exists in a less worse way, tried on https://phpmyadmin-dev.wdes.eu.org/ (root/public public/public)

That's because navigation panel was on a default width setting maybe? When I expand the navigation panel I see the same results like in my video.

[williamdes]

By the way I just checked and I agree this issue still exists in a less worse way, tried on https://phpmyadmin-dev.wdes.eu.org/ (root/public public/public)

That's because navigation panel was on a default width setting maybe? When I expand the navigation panel I see the same results like in my video.

I am thinking this is because having phpMyAdmin configuration storage working or not seems to change the results.

By the way if you want to help translate phpMyAdmin: https://hosted.weblate.org/languages/lt/phpmyadmin/