Css Issue

2 posts, 1 answers
  1. Lily
    Lily avatar
    2 posts
    Member since:
    Feb 2014

    Posted 08 Jul 2014 Link to this post

    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.

  2. Answer
    Ianko
    Admin
    Ianko avatar
    1932 posts

    Posted 11 Jul 2014 Link to this post

    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:
    .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.

     
Back to Top