CODEWITHSUNDEEP
htmljqgrid
Stack User
Stack User

Reputation: 59

How to increase the size of icons in jqgrid?

How should I increase the size of icons(add,delete..) in jqgrid?I have written following code in ui.jqgrid.css

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div  span.ui-icon,
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div  span.ui-icon{float:left;margin: 2px; width:18px;}
.ui-jqgrid .ui-jqgrid-toppager {border-left: 0 none !important;border-right: 0 none !important; border-top: 0 none 
!important; margin: 0 !important; padding: 0 !important; position: relative;white-space: nowrap;overflow: hidden;}

Upvotes: 3

Views: 1889

Answers (3)

Oleg
Oleg

Reputation: 221997

Free jqGrid supports vector based Font Awesome icons as alternative to raster icons of jQuery UI. To use Font Awesome you need just include the CSS of Font Awesome and to add iconSet: "fontAwesome" option. For example, https://jsfiddle.net/OlegKi/9f9exg91/1/ uses the following simple code

$("#grid1").jqGrid({
    colModel: [...],
    iconSet: "fontAwesome",
    ...
});

which displays

enter image description here

If you want for example increase the size of navigator icons in 1.5 of the standard size you can just add CSS rule

.navtable .ui-pg-button {
    font-size: 150%;
}

and get the navigator buttons

enter image description here

see https://jsfiddle.net/OlegKi/9f9exg91/2/. You can see that the navigator buttons are wrapped automatically. See the wiki article.

If you want in increase the size of all the buttons of the pager then you can use CSS rule

.ui-pg-table .ui-pg-button {
    font-size: 150%;
}

alternatives. See https://jsfiddle.net/OlegKi/9f9exg91/3/, which displays

enter image description here

Free jqGrid supports additionally iconsOverText: true option, which allows to get the following look of icons:

enter image description here

see https://jsfiddle.net/OlegKi/9f9exg91/4/

In general you can customize the buttons in easy way like you need. For example you can go to some button generator page like this one create custom button and to copy the CSS styles to .ui-jqgrid .navtable .ui-pg-button. I did this and created the next demo https://jsfiddle.net/OlegKi/9f9exg91/6/, which displays the following navigator bars:

enter image description here

Below you can find the CSS rules used in the last demo:

.ui-jqgrid .navtable .ui-pg-button:not(.ui-state-hover) {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    -webkit-box-shadow: 3px 3px 7px #666666;
    -moz-box-shadow: 3px 3px 7px #666666;
    box-shadow: 3px 3px 7px #666666;
    color: #ffffff;
    font-size: 14px;
    padding: 6px 6px 6px 6px;
    border: solid #0089de 1px;
    text-decoration: none;
}
.ui-jqgrid .navtable .ui-pg-button.ui-state-hover,
.ui-jqgrid .navtable .ui-pg-button:hover{
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    padding: 6px 6px 6px 6px;
    font-size: 14px;
    text-decoration: none;
}

I used additional pagerRightWidth: 100 option in the last demo to fix the right part of the pager and to provide more place for the navigator icons.

UPDATED: One can use top pager by usage of toppager: true instead of pager: true or to use both pagers. If one would replace .navtable in the above CSS rules to .ui-pg-table then the style will be applied to all buttons of the pager: https://jsfiddle.net/OlegKi/9f9exg91/9/

enter image description here

Upvotes: 2

Tony Tomov
Tony Tomov

Reputation: 3277

Another possible solution is to increase the font-size - see the classes

.ui-jqgrid .ui-jqgrid-view

and increase the font size you want.

Since you use Guriddo jqGrid 5.2.1 you can get quick and professional response in our public forum

Upvotes: 0

Ashish Lohia
Ashish Lohia

Reputation: 289

Your query is missing some valid information but you can always use zoom in your CSS over proper selectors.

Upvotes: 0

Related Questions