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:
I couldn't find them nor remove them in the project files either. It's something that is inserted by Radzen.
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"
}
}
Thanks for the workaround!