Ghost components in page Outline

Hello Radzen Team!

I don't know when this started happening, but there are two ghost components ("Item 2" and "Item 3") in all of my pages Outlines:

They are in every single page, old or recently added. I can't click them nor see them in the code files:
image

I couldn't find them nor remove them in the project files either. It's something that is inserted by Radzen.

Hi @kim,

Can you check if the same is part of pages and layout meta json?

Yeah, the way it appears in the Outline it should come from the layout. It would also explain why it appears in all pages.

It is not present in the Login page, which is the only one that does not use the Main layout.

The ghost components do not appear in the Main layout though:

Here's my main.json from the meta pages:

{
  "components": [
    {
      "components": [
        {
          "class": "align-items-center justify-content-start",
          "components": [
            {
              "class": "d-flex align-items-center col-md-3 col-3",
              "components": [
                {
                  "attributes": [],
                  "events": {
                    "click": [
                      {
                        "code": "await InvokeAsync(() => { mainSidebar.Toggle(); });",
                        "type": "execute"
                      },
                      {
                        "code": "await InvokeAsync(() => { mainBody.Toggle(); });",
                        "type": "execute"
                      }
                    ]
                  },
                  "icon": "",
                  "name": "mainSidebarToggle",
                  "style": {
                    "marginRight": "0px"
                  },
                  "type": "sidebar-toggle"
                },
                {
                  "attributes": [
                    {
                      "name": "style",
                      "value": "cursor: pointer"
                    }
                  ],
                  "events": {
                    "click": [
                      {
                        "code": "UriHelper.NavigateTo(\"\")",
                        "type": "execute"
                      }
                    ]
                  },
                  "name": "solidFalconLogo",
                  "path": "/assets/images/SF_Hori_White.svg",
                  "style": {
                    "height": "50px",
                    "width": "150px"
                  },
                  "type": "image"
                }
              ],
              "name": "leftCol",
              "type": "col"
            },
            {
              "class": "text-lg-right col-md-3 offset-md-6           col-6 offset-3",
              "components": [
                {
                  "attributes": [],
                  "items": [
                    {
                      "icon": "tune",
                      "path": "profile",
                      "text": "${Language.GetText(LanguageService.EN_Text.Preferences)}",
                      "visible": true
                    },
                    {
                      "icon": "people_outline",
                      "path": "user-list",
                      "text": "${Language.GetText(LanguageService.EN_Text.Users)}",
                      "visible": "${user?.role?.profileUserViewInMenu ?? false}"
                    },
                    {
                      "icon": "admin_panel_settings",
                      "path": "role-list",
                      "text": "${Language.GetText(LanguageService.EN_Text.Roles)}",
                      "visible": "${user?.role?.profileRoleViewInMenu ?? false}"
                    },
                    {
                      "icon": "exit_to_app",
                      "path": "account/logout",
                      "text": "${Language.GetText(LanguageService.EN_Text.Logout)}"
                    }
                  ],
                  "name": "mainProfileMenu",
                  "style": {},
                  "template": [
                    {
                      "icon": "face",
                      "name": "profileIcon",
                      "style": {
                        "verticalAlign": "middle"
                      },
                      "type": "icon"
                    },
                    {
                      "attributes": [],
                      "name": "nameLabel",
                      "style": {
                        "color": "#ffffff",
                        "marginLeft": "5px",
                        "marginRight": "5px"
                      },
                      "text": "${Security.User?.Name}",
                      "type": "label"
                    }
                  ],
                  "type": "profilemenu",
                  "visible": "${Security.IsAuthenticated()}"
                }
              ],
              "name": "col1",
              "type": "col"
            }
          ],
          "name": "headerRow",
          "style": {},
          "type": "row"
        }
      ],
      "name": "mainHeader",
      "style": {
        "width": "100%"
      },
      "type": "header"
    },
    {
      "components": [
        {
          "name": "main",
          "type": "content-container"
        }
      ],
      "name": "mainBody",
      "type": "body"
    },
    {
      "components": [
        {
          "attributes": [],
          "items": [
            {
              "icon": "home",
              "parameters": [],
              "path": "main",
              "selected": false,
              "text": "${Language.GetText(LanguageService.EN_Text.Main)}",
              "visible": "${user?.role?.dashboardViewInMenu ?? false}"
            },
            {
              "icon": "contacts",
              "items": [
                {
                  "icon": "people_alt",
                  "path": "person-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.People)}",
                  "visible": "${user?.role?.registrationPersonViewInMenu ?? false}"
                },
                {
                  "icon": "commute",
                  "path": "vehicle-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Vehicles)}",
                  "visible": "${user?.role?.registrationVehicleViewInMenu ?? false}"
                },
                {
                  "icon": "business",
                  "path": "company-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Companies)}",
                  "visible": "${user?.role?.registrationCompanyViewInMenu ?? false}"
                },
                {
                  "icon": "group_work",
                  "path": "group-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Groups)}",
                  "visible": "${user?.role?.registrationGroupViewInMenu ?? false}"
                },
                {
                  "icon": "recent_actors",
                  "path": "document-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Documents)}",
                  "visible": "${user?.role?.registrationDocumentViewInMenu ?? false}"
                },
                {
                  "icon": "category",
                  "path": "field-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Fields)}",
                  "visible": "${user?.role?.registrationFieldViewInMenu ?? false}"
                },
                {
                  "icon": "fingerprint",
                  "path": "identifier-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Identifiers)}",
                  "visible": "${user?.role?.registrationIdentifierViewInMenu ?? false}"
                },
                {
                  "icon": "location_on",
                  "path": "reference-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.References)}",
                  "visible": "${user?.role?.registrationReferenceViewInMenu ?? false}"
                },
                {
                  "icon": "gavel",
                  "path": "access-rule-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.AccessRules)}",
                  "visible": "${user?.role?.registrationAccessRuleViewInMenu ?? false}"
                },
                {
                  "icon": "dialpad",
                  "path": "access-point-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.AccessPoints)}",
                  "visible": "${user?.role?.registrationAccessPointViewInMenu ?? false}"
                },
                {
                  "icon": "memory",
                  "path": "controller-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Controllers)}",
                  "visible": "${user?.role?.registrationControllerViewInMenu ?? false}"
                },
                {
                  "icon": "dashboard",
                  "path": "template-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Templates)}"
                }
              ],
              "text": "${Language.GetText(LanguageService.EN_Text.Registrations)}",
              "visible": "${user?.role?.registrationViewInMenu ?? false}"
            },
            {
              "icon": "pageview",
              "items": [
                {
                  "icon": "transfer_within_a_station",
                  "items": [],
                  "path": "access-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Accesses)}"
                },
                {
                  "icon": "error_outline",
                  "path": "error-list",
                  "text": "${Language.GetText(LanguageService.EN_Text.Errors)}"
                },
                {
                  "icon": "devices",
                  "text": "${Language.GetText(LanguageService.EN_Text.Hardwares)}",
                  "visible": false
                },
                {
                  "icon": "chat",
                  "text": "${Language.GetText(LanguageService.EN_Text.Messages)}",
                  "visible": false
                },
                {
                  "icon": "supervised_user_circle",
                  "text": "${Language.GetText(LanguageService.EN_Text.Users)}",
                  "visible": false
                }
              ],
              "text": "${Language.GetText(LanguageService.EN_Text.Reports)}",
              "visible": true
            },
            {
              "icon": "settings",
              "items": [
                {
                  "icon": "videocam",
                  "text": "${Language.GetText(LanguageService.EN_Text.Camera)}",
                  "visible": false
                },
                {
                  "icon": "storage",
                  "text": "${Language.GetText(LanguageService.EN_Text.Database)}",
                  "visible": false
                },
                {
                  "icon": "mail",
                  "path": "email-config",
                  "text": "${Language.GetText(LanguageService.EN_Text.Email)}"
                },
                {
                  "icon": "wifi_tethering",
                  "text": "${Language.GetText(LanguageService.EN_Text.Network)}",
                  "visible": false
                },
                {
                  "icon": "print",
                  "text": "${Language.GetText(LanguageService.EN_Text.Printing)}",
                  "visible": false
                },
                {
                  "icon": "verified_user",
                  "text": "${Language.GetText(LanguageService.EN_Text.Validation)}",
                  "visible": false
                }
              ],
              "text": "${Language.GetText(LanguageService.EN_Text.Settings)}"
            },
            {
              "icon": "support",
              "items": [
                {
                  "icon": "support_agent",
                  "text": "${Language.GetText(LanguageService.EN_Text.Contact)}",
                  "visible": false
                },
                {
                  "icon": "description",
                  "text": "${Language.GetText(LanguageService.EN_Text.Manual)}",
                  "visible": false
                }
              ],
              "text": "${Language.GetText(LanguageService.EN_Text.Support)}",
              "visible": false
            }
          ],
          "name": "mainPanelMenu",
          "style": {},
          "type": "panelmenu"
        },
        {
          "class": "",
          "components": [
            {
              "class": "col-md-12 justify-content-center d-flex",
              "components": [
                {
                  "attributes": [
                    {
                      "name": "style",
                      "value": "cursor: pointer;"
                    }
                  ],
                  "events": {
                    "click": [
                      {
                        "code": "            await JSRuntime.InvokeAsync<object>(\"open\", new object[2] { \"https://www.solidinvent.com.br\", \"_blank\" });",
                        "type": "execute"
                      }
                    ]
                  },
                  "name": "solidInventLogo",
                  "path": "/assets/images/SI_White.svg",
                  "style": {
                    "height": "50px",
                    "width": "100px"
                  },
                  "type": "image"
                }
              ],
              "name": "col3",
              "type": "col"
            }
          ],
          "name": "row0",
          "style": {
            "marginLeft": "0px",
            "marginRight": "0px"
          },
          "type": "row"
        },
        {
          "class": "",
          "components": [
            {
              "class": "col-md-12 justify-content-center d-flex",
              "components": [
                {
                  "name": "copyrightShortLabel",
                  "style": {
                    "color": "#ffffff",
                    "textAlign": "center"
                  },
                  "text": "${Language.GetText(LanguageService.EN_Text.SolidInventCopyrightShort)}",
                  "type": "label"
                }
              ],
              "name": "col4",
              "type": "col"
            }
          ],
          "name": "row1",
          "style": {
            "marginLeft": "0px",
            "marginRight": "0px"
          },
          "type": "row"
        }
      ],
      "name": "mainSidebar",
      "style": {
        "bottom": "0px",
        "position": "absolute"
      },
      "type": "sidebar"
    }
  ],
  "events": {
    "load": [
      {
        "name": "user",
        "type": "set",
        "value": "${Security.User}",
        "valueType": "Global.Models.User"
      },
      {
        "name": "Language.Language",
        "type": "set",
        "value": "${user.language}",
        "valueType": "int"
      }
    ]
  },
  "name": "Main"
}

We reproduced the error and will fix the root cause of it. The problem was that certain code was generating "ghost" components in pages that use that particular layout. Unfortunately we cannot remove the ghost components from existing pages - you can do that yourself - every page should contain the following entries in their JSON which you can delete:

{
    "style": {
        "position": "absolute",
        "top": "0"
    }
}
1 Like

Thanks for the workaround!