RadMenu and adding html literal on top?

[Ahmed Ilyas]

When we have a RadMenu like this below, with the width set to 100%:

http://demos.telerik.com/aspnet-ajax/menu/examples/appearance/imageonly/defaultcs.aspx?#qsf-demo-source

how can I have a custom literal control (asp literal) sit on top of the menu bar but positioned to the far right of the menu bar? What styling/code would I need to add to set the position of the literal to be on top of the menu bar to the far right?

[Princy]

Hi Ahmed,

Hi I tried the following markup and was able to get the scenario that you have mentioned.
Please check the attached screenshot as well.
aspx:

<div style="float: right">
 <asp:Literal ID="Literal1" runat="server" Text="Your Heading">
 </asp:Literal>
</div>
 <br />
<telerik:RadMenu ID="RadMenu1" runat="server" Width="100%">
     <Items>
       <telerik:RadMenuItem Text="Products">
       </telerik:RadMenuItem>
       <telerik:RadMenuItem Text="Purchase">
       </telerik:RadMenuItem>
       <telerik:RadMenuItem Text="Community">
       </telerik:RadMenuItem>
       <telerik:RadMenuItem Text="Corporate">
       </telerik:RadMenuItem>
      </Items>
</telerik:RadMenu>

Thanks,
Princy.

[Ahmed Ilyas]

thank you. Almost..... except that the literal, I would like that to be sitting in front of the rad menu. Same positioning but just sitting infront of the radmenu

[Shinu]

Hi Ahmed,

I am not quite sure about your scenario,I suppose you mean on top of Radmenu instead of infront of.
aspx:

 <div style="float: right;margin-left:92%; margin-top: 22px; position: absolute;   z-index: 10001">
           <asp:Literal ID="Literal1" runat="server" Text="Your Heading">
           </asp:Literal>
</div>
       <br />
       <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%">
           <Items>
               <telerik:RadMenuItem Text="Products">
               </telerik:RadMenuItem>
               <telerik:RadMenuItem Text="Purchase">
               </telerik:RadMenuItem>
               <telerik:RadMenuItem Text="Community">
               </telerik:RadMenuItem>
               <telerik:RadMenuItem Text="Corporate">
               </telerik:RadMenuItem>
           </Items>
       </telerik:RadMenu>

Thanks,
Shinu.

[Ahmed Ilyas]

thats exactly what I wanted as per the attachment but for some reason in code, it does not quite work. it places the literal underneath the menu (but in the right position).

using IE 9 here.

<div style="float: right;margin-left:92%; margin-top: 22px; position:absolute">
    <asp:Literal runat="server" ID="litUserLoggedInDetails" />
</div>
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadMenu runat="server" ID="RadMenuItems" Height="40px" Width="100%" ForeColor="White">
    <DefaultGroupSettings OffsetY="-1" />
</telerik:RadMenu>

See attached screenshot.

Now, if i place a <br> underneath the div, the literal disappears somewhere... so its not visible on the page (but you can see it there in view source)

FYI, im adding menu items from codebehind dynamically.

[Ahmed Ilyas]

please ignore my post. I didnt read the full div style supplied - the key element was the z-index. this worked.

Now there is a blank line/row ontop of the menu. how can I get the menu to stay at the top and remove that empty line?

Many thanks!

[Kate]

Hello Ahmed,

Can you please clarify what is the appearance that you are getting (a simple image demonstrating is would be very helpful)? Can you also provide some code that will help us replicate the appearance from my side and help you out?

Greetings,
Kate
the Telerik team