1

Style based on question jqGrid - How can I make the paging buttons bigger? is used to make jqgrid top level toolbar buttons bigger:

.ui-jqgrid .ui-jqgrid-toppager {  height:35px !important; }
.ui-jqgrid .ui-pg-button  { height:30px !important; width:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-icon { position:relative; margin: 0px 10px;}

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
    margin: 0 10px !important;
}

/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox
{
    margin: 0px;
    padding: 0px;
    float: left;
    height: 18px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > input
{
    padding: 1px;
}

.ui-jqgrid .ui-pg-table .my-nav-checkbox > label
{
    margin: 0px;
    border-width: 0px;
}

.ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label
{
    margin: 0px;
    border-width: 1px;
}

/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text
{
    margin: 0px;
    padding: 1px 2px 1px 16px;
}
.ui-button-icon-only
{
    width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary
{
    margin: -8px 0px 0px -8px;
}

jqgrid toolbar contains also custom checkable buttons based on Oleg answer defined like:

 var autoedit = false;
 $("#grid_toppager_left table.navtable tbody tr").append(
        '<td class="ui-pg-button ui-corner-all">' +
            '<div class="ui-pg-div my-nav-checkbox">' +
            '<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
            '<label title="Press to toggle"' +
            ' for="AutoEdit">Press to toggle</label></div></td>'
    );
    $("#AutoEdit").button({
        text: false,
        icons: {primary: "ui-icon-star"}
    }).click(function () {                      
      autoedit = !autoedit;

    });

this custom button (star icon) in toolbar appears in wrong position: too right and together with next button:

start in wrong position

Also width is smaller than standard button and top alignment is too big:

buttonpos

How to make custom button like standard button ?

1 Answer 1

2

If you need to use toolbar icons which are larger as standard I would recommend you to use Font Awesome icons in the navigator toolbar instead of standard jQuery UI icons. I described in the answer.

For example if I set just the following CSS in the old demo

.ui-jqgrid .ui-jqgrid-toppager { height:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }

I can use 20px icons in the top toolbar. The demo will shows the following results

enter image description here

Because all icons from Font Awesome are implemented just as vector fonts one get perfect results for any font size (icon size). One need of cause to post all other custom solution (like checkable buttons) to Font Awesome, but after some investments you could get very good final results.

5
  • 1
    Thank you. Is'nt it simpler to remove toolbars from jqgrid, create toolbar in html and use click event handlers to send commands to jqgrid? Or is it better to use javascript from your answer to modify jqgrid buttons. There are two toggle buttons in toolbar user to toggle single click editing and jqgrid row numbering. Is it better to p lace tehm outside of toolbar or to menu opened from toolbar? Or is it better to implement toggle buttons using Font Awecome, how ? Right click menu is generated from toolbar automatically using your answer , will same code work with Awesome toolbar?
    – Andrus
    Mar 20, 2013 at 20:04
  • @Andrus: Sorry, but you asked too many questions. The most choices are the matter of the taste. I can't made solution of all your problems. You main question was in the title: "How to make jqgrid top toolbar custom buttons bigger like standard buttons". I think that by usage of scalable icons like Font Awesome you can archive the best results.
    – Oleg
    Mar 20, 2013 at 20:17
  • Thank you. Is it reasonable to use text only buttons landscape style like here in stackoverflow is better ? How to create bigger buttons containing only text ?
    – Andrus
    Mar 20, 2013 at 21:36
  • @Andrus: You are welcome! All you questions are far from your original question. The solution with "text only" buttons having large text could be absolute another as the solution with icons. You posted navigator bar with icons in your question. What is "reasonable" depends on requirements which one have. So one can't answer questions "Is it reasonable...?", "is it better...?"
    – Oleg
    Mar 23, 2013 at 15:37
  • thank you. I tried to change styles posted in answer. In this case buttons appear in correct position but buttons move few pixels on mouse hover. Toolbar looks ugly and I abandoned this approach. I dont know how to implement toggle buttons using fonts awesome. Should .button() calls replaced with span elements to create toggle buttons using font.
    – Andrus
    Mar 23, 2013 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.