This is a migrated thread and some comments may be shown as answers.

How to give space between image and text

1 Answer 337 Views
Menu
This is a migrated thread and some comments may be shown as answers.
M Kumar
Top achievements
Rank 1
Iron
Veteran
M Kumar asked on 20 Feb 2020, 09:21 AM

Hi,
    We using rad context menu with menu items, when i add image and text, there is no space between image and text and also text not align well, like showing little bit top.I used following style, but not work.

.RadMenu .rmHorizontal .rmText
       {
           padding-left: 55px !important;
       }

        .RadMenu .rmGroup .rmLeftImage {
    margin: 4px 6px 0 6px;
}

 

This is code behind - 

 <telerik:RadContextMenu ID="UserIconConMenu" runat="server"  
         ClickToOpen="false" EnableRoundedCorners="true"
            Width="20px" EnableShadows="true">
            <Items>
                
                <telerik:RadMenuItem ImageUrl="images/cust/master/Dashboard.png" Value="DB"
                    Text="Dashboard" />
                <telerik:RadMenuItem ImageUrl="images/cust/master/Explorer.png" Value="EP"
                    Text="Explorer" />
                <telerik:RadMenuItem ImageUrl="images/cust/master/Database-Access-icon.png" Value="CA"
                    Text="Cabinet Access" />
                  <telerik:RadMenuItem ImageUrl="images/cust/master/report-icon.png" Value="RP"
                    Text="Report" />
                  <telerik:RadMenuItem runat="server" Value ="STS" IsSeparator="True"  Text="|" />
                  <telerik:RadMenuItem ImageUrl="images/cust/master/Setting-icon.png" Value="ST"
                    Text="Settings" />
             
                 <telerik:RadMenuItem ImageUrl="images/cust/master/HelpMenu.png" Value="HP" Text="Help">
                     <Items >
                          <telerik:RadMenuItem ImageUrl="images/cust/master/Manuals.png" Value="OAM"
                    Text="OA User Manual" />
                          <telerik:RadMenuItem ImageUrl="images/cust/master/AboutMenu.png" Value="AB"
                    Text="About" />
                          <telerik:RadMenuItem ImageUrl="images/cust/master/Downloadexe.png" Value="FTA"
                    Text="FT Add-in" />
                     </Items>
                 </telerik:RadMenuItem> 
                 <telerik:RadMenuItem runat="server" Value ="PDS" IsSeparator="True"  Text="|" />
                 <telerik:RadMenuItem  ImageUrl="images/cust/master/logout-icon.png" Value="LO" 
                  Text="Logout" />
            </Items>
        </telerik:RadContextMenu>

This is screenshot what i get - http://prntscr.com/r515ag

But what i want -- http://prntscr.com/r518en

The size of image is 24x24 png format ,pls reply asap

Thanks

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 24 Feb 2020, 11:20 AM

Hi,

The following CSS will improve the appearance of the image in the ContextMenu you have shared. 

.RadMenu .rmGroup .rmLink {
    padding-left: 40px
}

.RadMenu .rmGroup .rmLeftImage {
    position: absolute;
    top: 3px;
    left: 0px;
    margin: auto;
    float: none;
}

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Tags
Menu
Asked by
M Kumar
Top achievements
Rank 1
Iron
Veteran
Answers by
Peter Milchev
Telerik team
Share this question
or