[UI] Horrible white square

[williamdes]

Describe the bug

This occurs for some reason a some time but is very annoying ...
Use designer and navigate between pages

[williamdes]

/**
 * Makes the breadcrumbs and the menu bar float at the top of the viewport
 */
$(function () {
    if ($('#floating_menubar').length && $('#PMA_disable_floating_menubar').length === 0) {
        var left = $('html').attr('dir') === 'ltr' ? 'left' : 'right';
        $('#floating_menubar')
            .css('margin-' + left, $('#pma_navigation').width() + $('#pma_navigation_resizer').width())

[williamdes]

./js/navigation.js

        $('#floating_menubar, #pma_console')
            .css('margin-' + this.left, (pos + resizer_width) + 'px');

[imdhruvgupta]

Hi @williamdes , I am not able to reproduce this bug. Could you please provide some steps to reproduce?

[williamdes]

@imdhruvgupta unfortunately no, I can not find a reliable way to reproduce this for now
You need to do some browsing and hope to find the issue, or best option: understand the code that generates the margin-left

[williamdes]

Demo servers (root, no password)

• 5.0.0-dev
• 4.8.9

@imdhruvgupta

• Go to any database, do to designer, then reload the page using F5 and chose reload in the designer left bar
  OR
• Go to any database, do to designer, then reload the page using F5 and navigate to structure

[msk4862]

@williamdes I'm new here, So, can you please tell me how to test(see) my changes.
Thanks in advance.

[williamdes]

@msk4862 Follow #15127 (comment) to reproduce and make the fix then try to reproduce, if you can not reproduce then you fixed the bug and can create a pull-request.

[msk4862]

@williamdes That much I now, But what I wanted to know was will my fixes be visible on Demo servers ( as mentioned in #15127 (comment) )

or Do I have to setup the phpmyadmin locally on my machine to check if that bug is fixed. (If yes how? because there is no setup instructions availbale)

( I know its a very silly question but I'm a beginner. So, a little help will help me a lot)

[williamdes]

@msk4862 You need to create a local phpmyadmin installation
Follow the steps:

• Fork the repository (fork button on this page)
• Clone your fork of the repository
• Create a new branch from QA_4_9 for your fix
• Try to fix the issue
• Commit the changes (use the --signoff option to add your signoff line in the commit body, please use your real name (this option is an agreement to our policy))
• Create a pull-request to the QA_4_9 branch

[williamdes]

[williamdes]

The fix introduced this issue, now I understand why this line was here

[rahgurung]

Hmm, Sorry for the mistake, I will send a fix soon.

[rahgurung]

Can you help me replicate this error? I just used my Chrome Device toggle bar and visited home page, it's not there.

[rahgurung]

I found it, never mind. :)

[rahgurung]

I found a weird thing with floating_menubar when the page is alright and no white square is there it was an empty div element.

and after reloading it when that whitespace appears, it was not an empty div element but had child element which were earlier neighbours elements.

[rahgurung]

Anyways my PR removes unwanted space from both the cases but we still need to give it a closer look. Actually, I guess the second one is the correct case as floating_menubar should contain serverinfo, topmenucontainer etc as it isn't meant to be empty all the time.
That unwanted space is also coming in this case, thus I am sure that we don't need any margin lefts here.

[williamdes]

Okay I will test your PR
Thanks @gurrrung :)

[williamdes]

I reverted everything since this is too much of an issue to be kept as is

If you update your fix I will do a lot more testing so it does not happen again
Can you re-do the PR @gurrrung ?

[rahgurung]

Yeah sure. I will do it soon once I get time. In the meantime if someone wants to take this issue, feel free to.

[anksh1997]

Hie @williamdes and @gurrrung, I noticed some strange behaviour too before reloading and after reloading the designer page. Attaching screenshots for more details about what I observed, in first screenshot (body) have padding-top to add some space for (floating-menubar) while (floating-menubar) is position fixed. In second screenshot that is after reloading it empties up the (floating-menubar).

Coming to the point : my approach added padding body and positioning to floating navbar, the issue is solved (further tests needs to be done though) but don't know its correctness