在引导程序模式宽度始终为0

Question

This is a function in the jqgrid in the load complete.

I have a bootstrap modal that is opened by clicking a button. In that modal I have a jqgrid. When I call a function in load complete, in that function, width of appending span is always 0. You can see the function below:

function columnresize(id) { 

    $(this).parent().append('<span id="widthTest" />');

    gridName = this.id;

    $('#gbox_' + gridName + ' .ui-jqgrid-htable' + gridName).css('width', 'inherit');
    $('#' + gridName).parent().css('width', 'inherit');

    var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel');
    var thisWidth;
    var itmCount = columnNames.length;
    /*var grid = $('#' + gridName);
    var iids = grid.getDataIDs();*/
    // Loop through Cols
    for (var itm = 0; itm < itmCount; itm++) {

    var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');

    var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
    $('#widthTest').html(thisCell.text()).css({
    'font-family': thisCell.css('font-family'),
    'font-size': thisCell.css('font-size'),
    'width': thisCell.css('width'),
    'font-weight': thisCell.css('font-weight')
    });


    var maxWidth = Width = $('#widthTest').width() + 17;
    //var maxWidth = 0;
    var itm2Count = curObj.length;
            // Loop through Rows
            for (var itm2 = 0; itm2 < itm2Count; itm2++) {

            var thisCell = $(curObj[itm2]);

            $('#widthTest').html(thisCell.html()).css({
            'font-family': thisCell.css('font-family'),
            'font-size': thisCell.css('font-size'),
            'font-weight': thisCell.css('font-weight')
            });

            thisWidth = $('#widthTest').width();
            if (thisWidth > maxWidth) {maxWidth = thisWidth+10;}
            }

    $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth+17);
    $('#' + gridName + ' .jqgfirstrow td:eq(' + 0 + '), #' + gridName + '_' + columnNames[0].name).width('30').css('min-width', '30px');
    //grid.setRowData ( iids[itm], false, {height: 30} );

    }
    $('#widthTest').remove();
}

I call the above function in the load complete of jqgrid like this:

loadComplete: function() {
columnresize.call(this, 'Table');
}

The width $('#widthTest').width() in line:

var maxWidth = Width = $('#widthTest').width() + 17;

is always 0!

Any idea?

Answer 1

after a lot of research I found that because it is a hidden dom element, I have to use this

jquery to get the actual size of hidden dom element.

Thanks to @Justinas.