changing the font size of IgGrid

How do I change the font size of the header AND the items in a grid ?  The default is way too big

Hello Mark,

Thank you for contacting Infragistics!

In the Infragistics.theme.css file there is a class called ui-widget where the font-size is set you can change that. You can also create your own class with a font size and set it to override the default font-size.

some examples would be helpful

Hello Mark,

Thank you for the update. I am attaching a sample that demonstrates overrideing the styles of the grid. Using the “ui-iggrid .ui-iggrid-tablebody td” and “span.ui-iggrid-headertext” using these specific styles allows use to overwrite the style for just the grid instead of every widget/control.

If you want to only change a single control/grid you will instead want to use “addClass” of jQuery:

https://api.jquery.com/addclass/

.smallFont {
font-size: 8pt;
}

$(“#grid1”).addClass(“smallFont”);

 

igGrid_FontSize

I tried this option

.smallFont {
font-size: 8pt;
}

$(“#grid1”).addClass(“smallFont”);

which changed the font size of the text in each row, but the header font size remained the same and the line spacing stayed the same resulting in huge spaces between each row

by the way, this method

.ui-igcheckbox-container > span {
            border: 2px solid grey;
        }

        span.ui-iggrid-headertext {
            font-size: 8pt;
        }

        .ui-iggrid .ui-iggrid-tablebody td {
            font-size: 8pt;
        }

didnt work at all

Hello Mark,

To apply the style to the cells as well as column headers of the grid you would do the following:

//To get the cells
$("#grid1").addClass("smallFont");

//To get the headers as they are in the container of the igGrid:
$("#grid1").igGrid("container").find("th").addClass("smallFont");
//or
$("#grid1_container th").addClass("smallFont");

As for:

span.ui-iggrid-headertext {
            font-size: 8pt;
}

.ui-iggrid .ui-iggrid-tablebody td {
            font-size: 8pt;
}

They work for me in the sample I am currently running and the sample I previously attached. What did you see in the sample I previously attached? Where did you include those styles on your page? You will want to make sure it is after you load the Infragistics styles as with CSS the last style applied “wins” unless the important flag is applied or if there is a more specific selector used for applying that style.