Align Image next to the Text

2 posts, 0 answers
  1. crazy05
    crazy05 avatar
    74 posts
    Member since:
    Sep 2014

    Posted 15 Sep 2014 Link to this post

    This is the image we did using and css. I am trying to implement the same in RAD Menu.

    How can I align image right to the text in Radmenuitem ? This image is in my solution.

    In this image, hover over the text and image will slide the menu. How can do it in radmenu ?

    <telerik:RadMenu ID="rmMenu" runat="server" EnableImagePreloading="true" EnableEmbeddedSkins="false"     BorderColor="Black" BorderStyle="None" BorderWidth="0px" Skin="COPMenu" BackColor="Transparent" ExpandAnimation-Type="None">
                   <telerik:RadMenuItem ID="riTrans" runat="server" Text="Communication"></telerik:RadMenuItem>
                    <telerik:RadMenuItem ID="riGen" runat="server" Text="Appointment Book"></telerik:RadMenuItem>
  2. Magdalena
    Magdalena avatar
    487 posts

    Posted 17 Sep 2014 Link to this post


    First I would like to clarify that we suggest using CSS styles in order to customize the HTML elements instead of using the RadMenu server-side properties such as BorderColor="Black" and etc.. The CSS gives you more options for styling the layout or formatting the HTML elements on the page. In order to make that process easier when using our controls we are applying different CSS classes to the rendered elements. Here you may find the RadMenu CSS selectors.
    Also  it is a good practice to separate your styles in external CSS files.

    Handler icons in RadMenu with a lightweight render mode are visualized by using font icons instead of sprites. This feature gives you an ability to customize size or color of handler icons in easy way. Instead of creating your custom sprite you can modify it simply by overwriting CSS rules.

    Please, find a sample solution in the attachment.

    Important: Please, keep in mind, that all menus rendered on one page have to be in the same render mode.


    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