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

Resize RadToolBarButton Image

4 Answers 54 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
Jeff asked on 18 Feb 2021, 01:56 PM

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?

4 Answers, 1 is accepted

Sort by
0
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 19 Feb 2021, 04:22 PM
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.
0
Doncho
Telerik team
answered on 23 Feb 2021, 11:58 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 26 Feb 2021, 04:20 PM

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!

0
Peter Milchev
Telerik team
answered on 03 Mar 2021, 03:17 PM

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. 

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:

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: 

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

 

 

Regards,
Peter Milchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ToolBar
Asked by
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
Doncho
Telerik team
Peter Milchev
Telerik team
Share this question
or