PDA

View Full Version : Global Font Size



Ramsay
14 Jul 2009, 10:08 AM
Is it possible to reset the global font size of an Ext JS application? I'd just like everything to be a bit bigger for readability, but would that be tied in to the application layout and dependent on the graphics for the theme being used?

Animal
14 Jul 2009, 11:04 AM
CTRL/+

Ramsay
15 Jul 2009, 1:58 AM
Thanks for that smart answer. It's not practical or desirable to get each user to increase their browser zoom before visiting the site. Does anyone have any other thoughts?

Animal
15 Jul 2009, 2:13 AM
What about



* {
font-size: 120%;
}


?

Ramsay
15 Jul 2009, 2:23 AM
I could have sworn I tried that. Anyway, I've just done it now and it does work to some extent - titles, form labels, grid cells are all increased in size, but stuff like buttons and tabs still remain at the same smaller font size. I tried this:


* {
font-size: 120% !important;
}

But that caused the layout to go all over the place. I guess I can just customise the individual classes but I was rather hoping someone had experience with this so I could cut some corners ;)

Animal
15 Jul 2009, 2:36 AM
You coud set the default Button scale to 'medium'

lyallo
15 Oct 2009, 1:53 AM
Similar problem here with a customer who thinks the text throughout their app is too small, apparently browser zoom isn't an acceptable solution :(

After fiddling around with font sizes for a while I decided to try just switching fonts instead, applying Verdana globally seems to make everything a little more readable.



* {
font-family: Verdana, Sans-Serif !important;
}


I can't help but feeling that there's a reason this is a really bad idea, but everything is working so far.

Animal
15 Oct 2009, 2:26 AM
You should be OK setting a more readable font.

We have



* {
font-family: tahoma, arial, verdana, helvetica, sans-serif;
color:#393939;
}


Which is very nice. The slightly lighter color results in a smoother look to the text.

lyallo
15 Oct 2009, 3:48 AM
Thanks for the tip Animal, that slight colour change does seem to improve readability further.

Animal
15 Oct 2009, 4:04 AM
Yes, I've just been playing with Firebug turning that style on and off.

It makes a very noticeable improvement in readability when there is a non-white background which is what is usually the case. All our forms are currently have the Ext blue themed background, and #393939 as the foreground color works so well, I'm going to add an FR that it be added:

visual/panel.css:


.x-panel-mc {
font: normal 11px tahoma,arial,helvetica,sans-serif;
background-color:#dfe8f6;
color:#393939;
}


visual/layout.css:


.x-border-layout-ct {
background-color:#dfe8f6;
color:#393939;
}


visual/combo.css:


.x-combo-list .x-combo-selected{
border-color:#a3bae9 !important;
background-color:#dfe8f6;
color:#393939;
}


visual/grid.css:


.x-grid3-row-selected {
background-color: #dfe8f6 !important;
background-image: none;
border-color:#a3bae9;
color:#393939;
}


visual/list-view.css:


.x-list-selected {
background-color:#dfe8f6;
color:#393939;
}

Daz
6 Jul 2010, 7:26 AM
Playing with some of the above css, I was surprised the following increased the fonts including buttons/ tabs (Ext 3.2.1)

* {
font-size: 99.5% !important;
}Just wondering if I've overlooked something as it seems to meet my needs.