Layout issue in Wordfence submenu (update)

  • Resolved devcri

    (@devcri)


    6 years, 7 months ago

    I have new information about the problem that I reported before:

    I noted a layout issue caused by the Wordfence Submenus. If I click on Wordfence > Dashboard in the Network-Backend (Multisite) everything looks fine. But as soon as I click deeper in the navigation (from the Dashboard onto a submenu e.g. Firewall, Scan, Tools, etc.) there appears an empty column on the left of the menu (looks like all except the topbar of WordPress gets inset to the right). This only happens in Wordfence Submenus.

    After digging through the html and css (and comparing it to the working wordpress installation) I discovered an attribute wildcard selector in the wordfence css that is causing the problem:

    /wp-content/plugins/wordfence/css/main.1533058343.css
[class * ="span"] {
    float: left;
    min-height: 1px;
    margin-left: 30px
}

    In the working wordpress installation I don’t have any css class in the body tag (Wordfence > Firewall Submenu) that contains “span”:
    <body class="wp-admin wp-core-ui js wordfence-0_page_WordfenceWAF auto-fold admin-bar branch-4-9 version-4-9-8 admin-color-fresh locale-de-de customize-support sticky-menu svg">

    But in the wordpress installation where I see the layout problem the body tag contains “span”:
    <body class="wp-admin wp-core-ui js wordfence-span-class-update-plugins-wf-menu-badge-wf-notification-count-container-wf-hidden-title-0-span-class-update-count-wf-notification-count-value-0-span-span_page_WordfenceWAF auto-fold admin-bar branch-4-9 version-4-9-8 admin-color-fresh locale-de-de multisite network-admin customize-support sticky-menu svg" style="">

    That’s the reason why the css attribute wildcard selector takes effect and adds a margin-left: 30px to the body tag.

    Hope this helps finding the bug.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @devcri

    These classes shouldn’t be in the body tag, they are related to the notification icon added to “Wordfence” menu item, check this screenshot.

    Having them in the body tag indicated some sort of conflict, did you run a plugin conflict test? this can be done by deactivating other plugins other than Wordfence, then recheck this issue if everything went alright, then you can re-enable the plugins one by one till you figure out the culprit.

    Alternatively, you might want to use “Health Check” plugin and enable “Troubleshooting mode“. The good thing about “Heath Check” plugin is that it’s developed by WordPress team and it only affects your logged in session so that other visitors won’t be affected.

    Let me know how it goes,
    Thanks.

    Hi @devcri

    Since we haven’t heard from you for a while I’m going to go ahead and resolve this thread. If you have any other questions or concerns, don’t hesitate to open a new one.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Layout issue in Wordfence submenu (update)’ is closed to new replies.