Font size picker for whole application

Question

I would like to make a font size picker that allows our users to select a certain font size (e.g. 110%, 125%) for display of the ExtJS application.

I don't want to use zoom or browser zoom, because there are parts that look ugly using browser zoom.

Is there a possibility to change the size of the text of the whole application dynamically (at runtime) by a certain percentage?

I already tried the following, but it didn't change anything:

Ext.util.CSS.createStyleSheet([
    '.x-body {',
    'font-size:14px',
    '}'
].join(''),
'FontSize');

Hey You can use below code in createStyleSheet({ bodyStyle : 'background:#f1f1f1;font-size:10px;'}) — Bipil Raut, Jul 15 '16 at 06:52
@BipilRaut I have made [a fiddle for you](https://fiddle.sencha.com/#fiddle/1dmv). If you can make it work, make an answer from it and I will accept. — Alexander, Jul 15 '16 at 07:01
@Alexander- I checking on https://fiddle.sencha.com/#fiddle/1dmv. Please wait. Thanks — Bipil Raut, Jul 15 '16 at 07:12

score 0 · Answer 1 · answered Jul 15 '16 at 06:20

0

This doesnt have to dont a extjs way, rather apply css to whole document body.

http://stackoverflow.com/questions/16460990/change-text-font-size-of-whole-page-content

answered Jul 15 '16 at 06:20

Praveen NC

I have applied CSS to the document body, but this doesn't change anything because ExtJS uses fixed sizes on all elements. Also, I cannot change the font size of all elements one by one, because ExtJS, when refreshing parts of the page, will set the default sizes again on some parts, while others aren't touched. – Alexander Jul 15 '16 at 06:35
I have made [a fiddle for you to play around](https://fiddle.sencha.com/#fiddle/1dmv). If you can get it to work, I will gladly accept your answer. – Alexander Jul 15 '16 at 07:02

1 Answers1