jqgrid viewGridRow dialog big span and icon [duplicate]

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.sstatic.net/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:

Prismatic

Could you post URL to the demo or add the code which defines the grid? It could be important to know how you fill the data in the grid. Do you include HTML fragments in the data or you use some formatters? – Josuejosy

Yeap I was using HTML outside the table code to show the icons. Changed it to the css and now it works fine! Thanks! :) – Prismatic

I'm glad to read this. The last screenshorts from the question seems be done before removing   like I showed in my answer. In my tests the icons looks very good after removing  . – Josuejosy

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.

Josuejosy

Thanks for the answer. Solved everything. I just got the ID of the row and applied the css you showed! Solved the blank spaces too. – Prismatic

I just found another problem with the icon in Internet Explorer 8. Posted in the question. :) – Prismatic

@Mah: Look at the demo. The icons seem be good. – Josuejosy

The icon in your example isnt inside a div. Thats why it works. Mine is because of its styling. So somehow ie8 doesnt recognize as it should. – Prismatic

@Mah: I use exactly the HTML fragment which you posted: '<div class="ui-state-attention ui-corner-all" style="display:table"><span class="ui-icon ui-icon-alert" title="Aguardando"></span></div>'. Look at the source code of the last demo. – Josuejosy

solved! The problem was the browser compatibility view. As im running this on an intranet, ie used other compatibility for pages that messed up the buttons. – Prismatic