Jqgrid viewGridRow dialog large space and icon

Question

I have a JQGRID with some data and Id to show row data in a dialog box when users double click on a row. Did this with:

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

But I had 2 problems with this:

1: I have an icon in one of the fields, and when it appears in the dialog box, its position is mixed up (see the figure below).

2: I have a long text (maximum 150 char) in the last field. The dialog shows it in a long space, and it creates a horizontal scrollbar. I wanted it to display text in multiple lines or something like a text area to create a vertical scroll bar. Already tried this:

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

But that did not work.

I was thinking about getting the same "editGridRow" style, but only as a view. But that didn't work either.

Has anyone understood how I can solve this?

**

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/YH:i', newformat:'d/m/YH: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}); }); 

Here is 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: http://i.stack.imgur.com/dphDB.jpg

**

EDIT:

**

The solution to these problems, but the icon becomes weird in Internet Explorer 8. Here is the icon code:

  <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 an HTML table. You can read this and this old answers about wrapping text in a table.

In the case of a 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 case the presentation form with long data may look like

The problem with the wrong left float in the first line of long text will be clear if you study the corresponding HTML code. You will see   at the beginning of each data cell. An empty cell has &nbsp;<span>&nbsp;</span> because the HTML contains. I'm not sure if this will be an error if   will be inserted twice, but in case of wrapping the text   not good. It can be deleted, for example, using 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 demonstration shows that after the above changes, the long text will display quite well:

You are not publishing how to fill in the icons in the Status column. I hope that after the above changes the icon will look better. If you still have problems, you can check the HTML code from the appropriate cell (you can include alert(html) in the beforeShowForm code) and change the code so that it displays better.

You can find the demo I wrote for the answer here . You just need to select a line with long text to display the presentation form.

Answer 2

Found the error response "display: table" here Internet Explorer 8 error with display: table . And it worked!
I use <meta http-equiv="X-UA-Compatible" content="IE=edge" /> at the top of the page and voila!