CODEWITHSUNDEEP
jqueryjqgrid
LCJ
LCJ

Reputation: 22652

jqGrid column align does not work when there is formatter for ui-icon

I have a jqGrid column model as shown below. The align property works fine when there is no formatter. When I added a formatter for displaying ui-icon, it is not aligning to the right (last column in the screenshot). What is the best jqGrid approach to correct the alignment?

jqGrid colModel

colModel: [
             { name: 'StockSymbol', key: true,  width: 150 , align: "right"},
             { name: 'StockName', width: 250, align: "right" },
             { name: 'VariationPercent',  width: 150, align: "right" },
             { name: 'GamesCount',  width: 100, align: "right" },
             { name: 'UsersCount',width: 100, align: "right" },
             { name: 'TotalPurchasedQty',  width: 150, align: "right" },
             {
                name: 'Create', index: 'StockSymbol', width: 120, align: "right",
                formatter: function (cellvalue, options, rowObject) {
                return '<span class="ui-icon ui-icon-circle-plus app-custom-button-create"  title="Create"></span>';
                 }
             }
           ],

Sreenshot

enter image description here

Upvotes: 1

Views: 3013

Answers (1)

Oleg
Oleg

Reputation: 221997

The reason is very easy. Class ui-icon uses CSS property display: block, but the CSS property text-align: right, which will be set by jqGrid on <td> will be not applied on blocks. To fix the problem you can for example modify the formatter to the following

formatter: function (cellvalue, options, rowObject) {
    return '<span class="ui-icon ui-icon-circle-plus app-custom-button-create"' +
        ' style="display:inline-block;" title="Create"></span>';
}

which changes display: block to display: inline-block.

Upvotes: 2

Related Questions