Is there any way to change the font size in the Table-Chart Widget?
I tried this but it didn't work:
.app-TableChart.Size12 .app-TableChart{
font-size: 12px;
}
Good try. Unfortunately there are styles that apply directly to the cells so the font size does not inherit from the container. Try this:
.app-TableChart .google-visualization-table th,
.app-TableChart .google-visualization-table td {
font-size: 12px;
}
Related
When I change my font-size from 1em to 1.1em, the font changes to a huge size. It looks like about size 48px or something. It should only increase by 10%.
* {
font-size: 1.1em;
}
Because with that selector every nested element increases the size by 10%. You might want 1.1rem instead, or better yet, just set :root { font-size: 18px; }
#ray hatfield's answer is correct.
As an alternative, you might want to change the * selector of this rule to html.
html {
font-size: 1.1em;
}
This way only the "basic font-size" (defined for the html tag, which is defined by the browser's default settings) will be increased by 10%, and all other font sizes (but only those with a relative unit like em or rem will change accordingly.
I have a base size in my html of 62.5% and I multiply my headers' font-sizes accordingly. When I inspect it in my Chrome: different h2 headings have the same font-size, but they appear in diff. sizes on my screen. From my understanding the font sizes (with %) depend on the font-size of html. But anyways the parent containers are also the same width.
html {
font-size: 62.5%; }
h1, h2, h3, h4 {
text-align: center; }
h1 {
font-size: 250%; }
h2 {
font-size: 187.5%; }
h3 {
font-size: 125%; }
h4 {
font-size: 100%;
font-weight: bold;
margin-bottom: 0.5em; }
I figured out, that there are two font-sizes in the parent elements, which are crossed out. If I deactivate them in my developer window it still affects the size of the headers. Interesting to see.
But I think I had a misunderstanding, I thought if I have a parent defined in the css like
div h1, the font-size of the parent affects the size. But it seems that every parent font-size has an effect on its child elements. That makes working with %, like in the article below, in my humble opinion useless, because you are not able to set a hierarchy for the fonts. Or am I wrong? So the best way would be to use rems everywhere to get consistent font-sizes?
In html tag set font size in percentages, in body tag set to 1em, and other tags use em units
I'd like to be able to scale font size up across the board in slickgrid. It would appear that this is doable via style sheets etc, but not programmatically set a font size to use.
I've tried setting rowHeight in options, and then just apply a style in css to the rows themselves, but the text is always offset (because line height).
Is there any easy way of being able to just say use this font size and have the grid handle the rest? (I dont need variable row heights / font size, just be able to dynamically set it before rendering)
You can try the followings CSS changes, make sure to load that CSS file at the end so it doesn't get overwritten
.grid .grid-canvas .slick-cell {
padding: 5px 7.5834px;
font-size: 14px;
}
.grid .grid-canvas .slick-cell td {
font-size: 14px;
}
.grid .slick-header-columns .slick-header-column {
height: 33px;
line-height: 14px;
margin: 0;
border: 0;
/* like TH */
background: transparent;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #333333;
}
.grid .slick-header-columns .slick-header-column.ui-state-default {
font-size: 14px;
line-height: 14px;
}
.grid .slick-header-columns .slick-header-column.ui-state-default td {
font-size: 14px;
}
If you want to change these settings dynamically after a page load, you might want to try putting all of these CSS in jQuery calls, though that might be ugly.. :S
If you want to change just 1 cell in particular, then you'll have to deal with SlickGrid metadata as shown in this answer here: Changing background color of a specific row in slickgrid?
I managed to get a working solution....
Basically I just created 3 css styles small medium large xlarge. I have row heights setup for those sizes as well.
When initializing the slick grid I set rowsize and then initialize the dataView like so:
dataView.getItemMetadata = function(idx) {
return {cssClasses: config.rowSize}
};
Basically applying the style of the same name to every row in the same slickgrid. Sucks I have to specify the actual rowheight in the actual initialization of slickgrid (vs just using something from css but what are you going to do.)
When I set the font family, font size, color etc. it seems that some nested elements override these with ugly browser defaults.
Must I really specify those a dozens of times for any kind of element on my page, or is there a way to set them globally once and forever?
How to do that?
* {
font-size: 100%;
font-family: Arial;
}
The asterisk implies all elements.
If you're using IE, chances are it will revert to the browser defaults for certain elements, like tables. You can counter that with something like the following CSS:
html, body, form, fieldset, table, tr, td, img {
margin: 0;
padding: 0;
font: 100%/150% calibri,helvetica,sans-serif;
}
input, button, select, textarea, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/* rest of your styles; like: */
body {
font-size: 0.875em;
}
Edit: you may want to read up on CSS resets; see threads like this one
I can't stress this advice enough: use a reset stylesheet, then set everything explicitly. It'll cut your cross-browser CSS development time in half.
Try Eric Meyer's reset.css.
you can set them in the body tag
body
{
font-size:xxx;
font-family:yyyy;
}
If you specify CSS attributes for your body element it should apply to anything within <body></body> so long as you don't override them later in the stylesheet.
If you want to set styles of all elements in body you should use next code^
body{
color: green;
}
I have a page where I combine labels, input boxes and text areas to display some content.
I would like all of them to have the same font-family and font-size.
I have played with the font-family: inherit style but this doesn't seem to work for the input and text areas.
What would be the easiest way to ensure the same font / size over the whole page.
Ok ... this does the trick:
*
{
font-family: arial;
}
input
{
font-family: inherit;
font-size: 100%
}
textarea
{
font-family: inherit;
font-size: 100%
}
My CSS is iffy as I haven't used it in some time, but I believe doing
*
{
font-family: arial;
}
will apply to all.
I think most CSS devs will do something like
body {font: normal 10pt Arial}
At the top of the CSS file.
If you want to change labels from this, just add a
label, input, textarea {font-family:Georgia}
somewhere down the road.