RadMenu and adding html literal on top?

7 posts, 1 answers
  1. Ahmed Ilyas
    Ahmed Ilyas avatar
    51 posts
    Member since:
    Feb 2010

    Posted 29 Jan 2013 Link to this post

    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?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Jan 2013 Link to this post

    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.
  3. Ahmed Ilyas
    Ahmed Ilyas avatar
    51 posts
    Member since:
    Feb 2010

    Posted 30 Jan 2013 Link to this post

    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
  4. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 31 Jan 2013 Link to this post

    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.
  5. Ahmed Ilyas
    Ahmed Ilyas avatar
    51 posts
    Member since:
    Feb 2010

    Posted 31 Jan 2013 Link to this post

    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.





  6. Ahmed Ilyas
    Ahmed Ilyas avatar
    51 posts
    Member since:
    Feb 2010

    Posted 31 Jan 2013 Link to this post

    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!
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 05 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top