title: jqgrid viewGridRow dialog big span and icon
body: <p>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:</p>
  
  <pre><code>ondblClickRow: function(rowid) {
      jQuery(this).jqGrid('viewGridRow', rowid);
  }
  </code></pre>
  
  <p>But I had 2 problems with that:</p>
  
  <p>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).</p>
  
  <p>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:    </p>
  
  <pre><code>afterShowForm: function(form) { form.css("width", "fixed"); }
  </code></pre>
  
  <p>But it didnt work. </p>
  
  <p>I was thinking about getting the same styling of "editGridRow" but something like view only. But it didnt work out too.</p>
  
  <p>Anyone got any idea about how can I solve that?</p>
  
  <p>**</p>
  
  <h2>EDIT:</h2>
  
  <p>**</p>
  
  <p>Sorry guys, heres how I fill the Grid!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(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});
      });
  </code></pre>
  
  <p>Heres the table:</p>
  
  <pre><code>    &lt;table id="gridJson"/&gt;
          &lt;thead&gt;
              &lt;tr align="center"&gt;
                &lt;th&gt;NUM SOLICIT&lt;/th&gt;
                &lt;th&gt;VALOR&lt;/th&gt;
                &lt;th&gt;OBS&lt;/th&gt;
                &lt;th&gt;STATUS&lt;/th&gt;
                &lt;th&gt;DATA SOLICIT&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
       &lt;/table&gt;
           &lt;div id="pager"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>IMAGE : <a href="https://i.stack.imgur.com/dphDB.jpg" rel="nofollow noreferrer">http://i.stack.imgur.com/dphDB.jpg</a></p>
  
  <p>**</p>
  
  <h2>EDIT:</h2>
  
  <p>**</p>
  
  <p><strong>Solved</strong> those issues but the icon is going weird in internet explorer 8.
  Here's the code of the icon:</p>
  
  <pre><code>    &lt;div class="ui-state-attention ui-corner-all" style="display:table"&gt;
         &lt;span class="ui-icon ui-icon-alert" title="Aguardando"&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>ICON IN FIREFOX : <img src="https://i.stack.imgur.com/8HWuM.jpg" alt="Firefox">
  ICON IN IE8: <img src="https://i.stack.imgur.com/PCSZ6.jpg" alt="IE8"></p>