CODEWITHSUNDEEP
jqueryjqgridalignment
Marcus Leon
Marcus Leon

Reputation: 56659

jqGrid row vertical alignment not middle

For some reason on our grid the vertical alignment of the rows is not middle. It appears to be top. Is there something specific you have to do to achieve vertical alignment?

Here's an example of the alignment: alt text

Our grid definitions:

$.extend(jQuery.jgrid.defaults, { 
    url:'NoData.json',
    datatype: 'json',
    mtype: 'GET',
    altRows:true, 
    //altclass:'zebraOdd',
    loadError: function(xhr,st,err) { 
        handleError(xhr, 'Error loading grid');
    },
    onPaging: function (b) {
        return onPage($(this));
    },
    beforeRequest: function() {
        beforeReq($(this));
    },
    loadComplete: function() {
        loadComp($(this));
    },
    onSelectRow: function(id){
        $(this).resetSelection(); //This prevents the disabling of the row hovering and altclass - http://stackoverflow.com/questions/3916477
    },
    scrollOffset:0, //No scrollbar
    rowNum:15,
    shrinkToFit:true,
    width:1120,
    viewrecords: true ,
    height: '360',
    hidegrid: false //Don't show the expand/collapse button on the top right
});  

$("#grid-pos").jqGrid({
    colNames:['Position Account', 'Product Code', 'Product Type','Expiry', 'Put/Call', 'Strike Price', 'Current Long', 'Current Short', 'Held Exercise Requests', 'Held Abandon Requests', 'Last Trade Date / Expiration Date', 'Select Operation'],
    colModel :[
                   {name:'account', index:'account', width:85, sortable:false},
                   {name:'productCode', index:'productCode', width:85, sortable:false},
                   {name:'productType', index:'productType', width:85, sortable:false},
                   {name:'expiry', index:'expiry', width:85, align:'right',stype:'select', sortable:false},
                   {name:'putCall', index:'putCall', width:85, sortable:false},
                   {name:'strike', index:'strike', sorttype: 'float', align:'right', width:85, sortable:false},
                   {name:'long', index:'long', width:85, align:'right', sortable:false},
                   {name:'short', index:'short', width:85, align:'right', sortable:false},  
                   {name:'exercise', index:'exercise', width:90, align:'right', sortable:false},
                   {name:'abandon', index:'abandon', width:90, align:'right', sortable:false},
                   {name:'LTD', index:'LTD', width:110, align:'right', sortable:false},
                   {index:'operations', width:150, title:false, align: 'center', formatter:opsFormatter, sortable:false}
               ],
               pager: '#div-pos-pager',
               caption: 'View Positions'
});

Upvotes: 1

Views: 13109

Answers (4)

m00seDrip
m00seDrip

Reputation: 4021

This will make it middle-align. Change it from middle to top or bottom if you have other needs.

<style type="text/css">
.ui-jqgrid tr.jqgrow td {vertical-align:middle !important}
</style>

Upvotes: 3

user1948613
user1948613

Reputation: 11

<style>
    .ui-jqgrid tr.jqgrow { outline-style: none; color:#286abf;font-weight:normal; cursor : pointer; vertical-align:top }
</style>

Upvotes: 1

Marcus Leon
Marcus Leon

Reputation: 56659

We had our grid within another div that had vertical-align:top set. Removed this and we were good. duh

Upvotes: 1

Adrian
Adrian

Reputation: 2923

Have you tried applying vertical-align: middle; css property to your table cells?

I believe default vertical alignment is top so applying the above should override that. Also if you can give me a link to an example page that shows this I can look into it further.

Upvotes: 4

Related Questions