Font-size change functionality

[License Developer]

See attached screenshot1

We need to have this functionality in our application. These are simple Anchor tags which call JavaScript function.

 Attached is the JavaScript function(Screenshot2)

  

It is changing the size of text on webpage, but it is not doing so in case of Grid, Panel Bars, Menu.

 

Kindly let us know how it can be done in case of Telerik controls.

 

[Dimo]

Hello,

RadControls by default use a pixel font size defined in their skins. You are currently setting a font-size for their wrappers, but it cannot override the specified font-size in the RadControls' skins. This is normal.

What you can do is apply CSS classes to the page containers and use CSS styles. For example:

Javascript

document.getElementById('content').className = "fontsize10";

CSS

.fontsize10,
.fontsize10  *
{
        font-size: 10px !important ;
}



All the best,
Dimo
the Telerik team

[License Developer]

HI,

As per your comment we tried implementing following functionality.

1. We specified following Style in CSS

.fontSize1

{

 

font-size: 12px;

 

}

.fontSize2

{

 

font-size: 15px;

 

}

.fontSize3

{

 

font-size: 20px;

 

}

On .aspx page we have used following functions

 

function

 

fontSize1()

 

{

 

document.getElementById('content').className='fontSize1';

 

 

}

 

 

 

 

function

 

fontSize2()

 

{

document.getElementById('content').className='fontSize2';

 

}

 

function fontSize3()

 

{

document.getElementById(

'content').className='fontSize3';

 

 

}

But when we ran the page, all other text(font size) except radgrid was changing.

Kindly let us know how to change font size in case of radgrid text.

We have specified Font-size opf Radgrid in Control.skin file.

 

[Dimo]

Hello,

Note the usage of "!important" in my demo.

Sincerely yours,
Dimo
the Telerik team

[License Developer]

HI,

Thanks for your reply. I tried using "!important", but im  unable to resolve this problem. The grid text doesnt change whereas all other text in page changes.

Kindly let me know whats the significance of * in .fontsize10  *, and the importance of "!important"

Kindly help us to resolve this problem.

[Dimo]

Hello,

.className * { }  means "apply styles to all descendants of the element with a className CSS class"

!important means "apply the style property even if it conflicts with other style properties with higher specificity "

If you need to work with CSS, I recommend you to get familiar with the language basics:

http://css.maxdesign.com.au/selectutorial/

Best wishes,
Dimo
the Telerik team