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.)
Related
I have seen conflicting information about how to use a master style sheet and have experienced some bugs when testing methods. Just want to get clarification on the proper way to do this.
I would like to store cross website branding styles in a master global.css sheet and make page specific adjustments on a second .css file.
For example, this code would live on the master sheet:
#headline1{
font-family: 'Roboto', sans-serif;
font-size: 96px;
letter-spacing: -1.5px;
}
and this code would be page specific:
.headline {
color: #FFFFFF;
text-align: center;
}
I have recently read something that said you should not use ID in this manner. I've also run into issues when using it multiple times in the same grouping. I initially tried doing this using just classes instead of the ID, but it never worked. Not sure why.
Is this method considered proper? If not what is the proper way to do this?
If you create a master.css with:
.headline {
font-family: 'Roboto', sans-serif;
font-size: 96px;
color:#000
letter-spacing: -1.5px;
}
You can build upon/replace it per page as long as your custom css comes after the master.css
.headline {
font-size: 45px;
color: #FFFFFF;
text-align: center;
}
Quick example of a page:
<link rel="stylesheet" type="text/css" href="master.css"/>
<style>
.headline { //
font-size: 120px; // size overides master
color: #FF0000; // color overides master
text-align: right; // added alignment, which is overiding the browsers base css
}
</style>
I'm not sure if this is quite what you are looking for, but I hope it helps
In the example you provided a can only assume you have something along the lines of:
<div id="headline1"><span class="headline">Title</span></div>
This would basically mean any style applied to the div, the span would inherit unless told otherwise.
To further expand on this, you can also use inline styles <span style="color:#FFF"> which will dominate any other styling UNLESS an !important; has been added to a style element.
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;
}
In SpryTabbedPanels.css trying to add this code
.TabbedPanels {
overflow: hidden;
font-family: tahoma;
font-size: 1em;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
But the font size here apply to the content too, But I need it to apply only to the head menu.
thanks
There is no way you can do this in an 'easy' way. All the parent css rules get inherited by child nodes unless overwritten. So if you want to make sure that all the elements inside .TabbedPanels will not inherit its font, use:
.TabbedPanels <elements you need styled> {
font-family: <your desired font>;
}
For example, this will reset font of all the nodes within .TabbedPanels:
.TabbedPanels * {
font-family: auto;
}
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.