I have a radpanel Bar. Inside the rad panel bar I have Dnn Label . I added Help Text to it. When I mouse over on the help Icon the 1st help text is going behind the radpanel bar and not being visible at all. This is happening is Dnn7 (In Dnn6 it is fine)
I tried adding Z-index and Position:relative attributes that did not help.
I tried adding Z-index and Position:relative attributes that did not help.
1 Answer, 1 is accepted
0
Accepted
Hi Lily,
On my end I am unable to use a DNN label within a RadPanelBat. Although investigating the HTML through their demo pages, I can see that the reason for this behavior is that the DNN tooltip is rendered as child element of the DNN label.
Thus the PanelBarItems are designed to keep their content visible only in their viewport. So, what happens is that the tooltip appears as content of the item and it is constrained by the view port.
The proper resolution would be to find an option for the tooltip to be rendered outside RadPanelBar as a direct child of the form element. So that when shown, it uses absolute positioning via JavaScript to be shown at the proper place.
For example the RadTooltip is designed that way. You can examine its behavior and rendering in this online example.
Through the investigation of the HTML rendered by the DNN tooltip I tried to recreate the scenario and found a possible workaround.
The following CSS will show the tooltip as expected:
If undesired side effects appear on your end, I recommend trying to find an option to configure the tooltip to be rendered as a direct child of the form and not the Panel Item.
Regards,
Ianko
Telerik
On my end I am unable to use a DNN label within a RadPanelBat. Although investigating the HTML through their demo pages, I can see that the reason for this behavior is that the DNN tooltip is rendered as child element of the DNN label.
Thus the PanelBarItems are designed to keep their content visible only in their viewport. So, what happens is that the tooltip appears as content of the item and it is constrained by the view port.
The proper resolution would be to find an option for the tooltip to be rendered outside RadPanelBar as a direct child of the form element. So that when shown, it uses absolute positioning via JavaScript to be shown at the proper place.
For example the RadTooltip is designed that way. You can examine its behavior and rendering in this online example.
Through the investigation of the HTML rendered by the DNN tooltip I tried to recreate the scenario and found a possible workaround.
The following CSS will show the tooltip as expected:
.RadPanelBar div.rpSlide { overflow: visible;}If undesired side effects appear on your end, I recommend trying to find an option to configure the tooltip to be rendered as a direct child of the form and not the Panel Item.
Regards,
Ianko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.