Q3 2009 PanelBar First-Level Templates broken

[Allow Backorder]

Hey everyone,

We tend to have this dilemma with most upgrades from each quarter, but the RadPanelBar First-Level template does not seem to be working correctly after upgrading to Q3 2009.  We position:relative a div up and overlay the contents across the PanelBar header with negative positioning.  While the actual positioning looks correct, the header is rendered un-clickable.

The code that is in the first level template control:

<div>
  <div class="goToTopDiv">
    <a runat="server"></a>
    <a href="#top" id="goToTop" class="goToTop">
      <asp:Literal ID="ltlGoToTopText" runat="server"
                Text='Go To Top'>
      </asp:Literal>
    </a>
  </div>
</div>

The CSS classes:

.RadPanelBar .goToTopDiv
{
    position:relative;
    margin-top:-32px;
    margin-left:950px;
    width:60px;
}

.RadPanelBar .goToTop
{
    font-size:.88em;
    text-decoration:none;
    color:Black;
    z-index:2;
}

Thanks for the help,

Adam.g

[Kamen Bundev]

Hi,

 

Add this CSS to your page to fix this behavior:

div.RadPanelBar .rpTemplate,
div.RadPanelBar .rpTemplate div
{
    float: right;
}
Let me know if you still have problems with it.

Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Adam]

Actually, your above fix affected the markup of the content in the actual section templates.  Adding the float:right to one of the control divs gave most of the needed functionality:

<div>
  <div class="goToTopDiv" style="float:right;">
    <a runat="server"></a>
    <a href="#top" id="goToTop" class="goToTop">
      <asp:Literal ID="ltlGoToTopText" runat="server"
                Text='Go To Top'>
      </asp:Literal>
    </a>
  </div>
</div>

However, when setting the name property of the first anchor tag, no other links can use them as an anchor target (ie link url = #linktarget).

[Kamen Bundev]

Hello Adam,

I'm not sure I understand what are you trying to achieve in your code snippet. Can you send me a live URL and elaborate a little bit on the needed functionality? I'll convert the forum post to a support ticket if you need the privacy.

All the best,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Adam]

It's pretty simple really.  For pages with multiple panel bar sections, we provide links at the top of the page that allow the user to jump to a particular section.  In order to ensure the user still sees the actual section they jumped to, we put this anchor in the first-level template as opposed to somewhere in the actual content of the section.  We also have a go to top link in the first-level template that allows the user to jump back to the top of the page.  With the solutions offered so far in this post, everything works as desired except that now, when the div is floated, the links at the top of the page do not work.  Apparently, anchor tags are not wanting to jump to an anchor that is in a floated element.

While the application is in an intranet setting, I could whip together an example and send that.

Thanks,

Adam.g

[Kamen Bundev]

Hello Adam,

An example will be great since the behavior remains unchanged here with or without the applied float.

I did a simple test - I've set a name="test" to the last anchor on my test page and put href="#test" on the first one, they seem to navigate properly when all panels are open, tested in IE7/8 and Firefox 3.5. I'm attaching the test page.

Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.