jqgrid viewGridRow dialog big span and icon

Question

I have a JQGRID with some data and Id like to show the row data in a dialog when the users double clicks the row. Did that with:

ondblClickRow: function(rowid) {
    jQuery(this).jqGrid('viewGridRow', rowid);
}

But I had 2 problems with that:

1: I have an icon in one of the fields and when it shows in the dialog, its position is messed up(see pic below).

2: I have a long text(150 char maximum) in the last field. The dialog is showing it in a long span and it creates an horizontal scroll bar. I wanted it to show the text in a couple of lines or something like a textarea so it creates a vertical scroll bar. Already tried this:

afterShowForm: function(form) { form.css("width", "fixed"); }

But it didnt work.

I was thinking about getting the same styling of "editGridRow" but something like view only. But it didnt work out too.

Anyone got any idea about how can I solve that?

**

EDIT:

**

Sorry guys, heres how I fill the Grid!

<script type="text/javascript">

    $(function() {
        jQuery("#gridJson").jqGrid({ 

            url:'Consulta_Dados_Ultimos.asp', 
            datatype: "json", 
            colNames:['N°','Data','Valor','Obs','Status'], 
            colModel:[ 
                        {name:'num_solicit_vale', align:'center', sorttype:'int', width:80}, 

                        {name:'data_solicit_vale',index:'data_solicit_vale',width:95,align:'center',sorttype:'date',

                            formatter:'date',formatoptions: {srcformat:'d/m/Y H:i', newformat:'d/m/Y H:i'}}, 
                        {name:'valor',index:'valor',width:80, align:'left', formatter:'currencyFmatter'}, 


                        {name:'obs_solicit_vale', sortable:false, width:240},
                        {name:'status_solicit_vale',index:'status_solicit_vale',width:80, formatter:'iconFmatter'}
                        ],  
            rowNum:10, 
            rowList: [10,20,30],
            rownumbers:true, 
            pager: '#pager', 
            sortname: 'data_solicit_vale', 
            viewrecords: true, 
            sortorder: "desc", 
            loadonce: true,
            gridview: true,
            hidegrid: false,
            height: 230,
            autowidth: '100%',
            shrinkToFit: false,
            viewrecords: true,
            caption:"Consulta Solicitacao Vale Transporte",
            jsonReader: {
                repeatitems: false,
                root: "rows",
                total: "total",
                records: "records",
                id: "idsolicit_vale"
            },
            ondblClickRow: function(rowid) {
                jQuery(this).jqGrid('viewGridRow', rowid);
            }


        }); 

        jQuery("#gridJson").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false});
    });

Heres the table:

    <table id="gridJson"/>
        <thead>
            <tr align="center">
              <th>NUM SOLICIT</th>
              <th>VALOR</th>
              <th>OBS</th>
              <th>STATUS</th>
              <th>DATA SOLICIT</th>
            </tr>
        </thead>
     </table>
         <div id="pager"></div>

IMAGE : https://i.stack.imgur.com/dphDB.jpg

**

EDIT:

**

Solved those issues but the icon is going weird in internet explorer 8. Here's the code of the icon:

    <div class="ui-state-attention ui-corner-all" style="display:table">
       <span class="ui-icon ui-icon-alert" title="Aguardando"></span>
    </div>

ICON IN FIREFOX : ICON IN IE8:

Answer 1

The View form will be displayed as a HTML table. About wrapping of the text in the table you can read this and this old answers.

In case of View form you can use for example the following CSS style

div.ui-jqdialog-content td.form-view-data {
    white-space: normal !important;
    height: auto;
    vertical-align: middle;
    padding-top: 3px; padding-bottom: 3px
}

In the case the view form with long data can look like

The problem with the wrong left float in the first line of long text will be clear if you examine the corresponding HTML code. You will see   at the beginning of every cell with the data. The empty cell has &nbsp;<span>&nbsp;</span> as the HTML contain. I am not sure whether it's a bug that   will be inserted twice, but in case of wrapping of the text the   is not good. It can be removed for example with the following code:

beforeShowForm: function ($form){
    $form.find("td.DataTD").each(function () {
        var html = $(this).html();  // &nbsp;<span>&nbsp;</span>
        if (html.substr(0, 6) === "&nbsp;") {
            $(this).html(html.substr(6));
        }
    });
}

The demo shows that after the above changes the long text will be displayed good enough:

You don't post how you fill the icons from the Status column. I hope, that after the above changes the icon will be look better. If you will still have any problem you can examine the HTML code from the corresponding cell (you can include alert(html) in the code of beforeShowForm) and modify the code so that it will be displayed better.

You can find the demo which I wrote for the answer here. You need just select the row with the long text to display the view form.