Resize RadToolBarButton Image

[Jeff]

I would prefer to use an SVG for the ImageUrl property of the RadToolBarButton. However, I cannot figure out how to get the RadToolBar to resize the image to match the button/text size.

When I export my SVG to 18px, it is deformed.  But at a larger size, it exports fine.  So, essentially I want to use that larger size, then resize it in the browser (RadToolBarButton).

How do I get the RadToolBar to resize the Image set in the ImageUrl property?

[Jeff]

I was able to use another application to export the SVG to the proper file size and basically solve my problem.  However, I would still like to know how to set the size a RadToolBarButton Image, or if it is even possible.

[Doncho]

Hi Jeff,

I am glad to hear you have found a feasible solution for the case.

In general, when you set a path to a file in the ImageUrl property of a RadToolBarButton, this path will be set as the 'src' attribute of an <img> tag rendered in the Html structure of the page.

You can style the referenced image by applying some custom CSS.

One approach for style the image in a specific button is to use the CssClass property to generate a certain Css selector. For instance:

<style>
    .customButton img {
        height: 18px;
        width: 18px;
    }
</style>

<telerik:RadToolBar ID="RadToolBar1" runat="server">
    <Items>
        <telerik:RadToolBarButton Text="button" ImageUrl="~/circle.svg" CssClass="customButton">
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

Here is a very simple SVG file, you can use for testing:

circle.svg

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="circleIcon" viewBox="0 0 20 20">
    <circle cx="10" cy="10" r="6"  stroke="black" stroke-width="2" fill="red" />
  </symbol>
  <use xlink:href="#circleIcon"/>
</svg>

I hope this will help.

Please let me know if any further questions come up.

Kind regards,
Doncho
Progress Telerik

[Jeff]

Thank you for providing this answer.  Can you recommend a good tutorial/video/article, etc., for understanding the use of CSS with my Telerik controls? 

For the most part, I can manipulate as needed; but there are are times when I build out a selector and it doesn't apply to the control. 

Some of our styling (before I joined our team) includes the use of "!important", and it's my understanding that this is discouraged by the development community, in general.  I'd like to understand the interaction with CSS on a deeper level.

 

Thanks, again!

[Peter Milchev]

Hello Jeff,

To narrow down the styling issues, I would suggest inspecting the HTML elements and the styles applied to the elements. 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. 

• Inspect the Generated HTML of a Control
• See the Applied Styles

Then, if you are an expert with the CSS selectors it will be very easy to create the correct CSS styles and understand the CSS specificity explained in the next section. Here is a list of all CSS selectors, it is good to know them or at least to know they exist, so you can easily search for them on the internet. The w3schools web site shows good examples and explanations for each of them:

• https://www.w3schools.com/cssref/css_selectors.asp 

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: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;
• CSS !important: Don’t Use It. Do This Instead

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

 

Regards,
Peter Milchev
Progress Telerik