jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Problem with some browser, cut the image inside the cell
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 7 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
Hi
I’m using jqgrid, the problem is the images inside the cell are cutted like height of row.
If I refresh the page, all the image are showed correctly.
This problem is just using Chrome and Firefox but not with IE.
Thank’s Luca
Here’s the code:<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function() { var theme = getDemoTheme(); var url = "sql-json-grid-immobili.asp"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'id' }, { name: 'codrif' }, { name: 'nometipologia' }, { name: 'motivo' }, { name: 'comunezona' }, { name: 'mq' }, { name: 'locali' }, { name: 'camere' }, { name: 'bagni' }, { name: 'prezzo' }, { name: 'foto' } ], id: 'id', url: url, pager: function(pagenum, pagesize, oldpagenum) { // callback called when a page or page size is changed. } } var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid2").jqxGrid( { width: 1150, source: dataAdapter, theme: theme, filterable: true, selectionmode: 'multiplerowsextended', sortable: true, pageable: true, autoshowfiltericon: true, autorowheight: true, autoheight: true, altrows: true, columnsresize: true, columns: [ { text: 'ID', datafield: 'id', width: 30, cellsalign: 'center' }, { text: 'RIF', datafield: 'codrif', width: 50, cellsalign: 'center' }, { text: 'TIPOLOGIA', datafield: 'nometipologia', width: 120, cellsalign: 'center' }, { text: 'MOTIVO', datafield: 'motivo', width: 100, cellsalign: 'center' }, { text: 'CITTA', datafield: 'comunezona', width: 240, cellsalign: 'left' }, { text: 'MQ', datafield: 'mq', width: 40, cellsalign: 'center' }, { text: 'LOCALI', datafield: 'locali', width: 60, cellsalign: 'center' }, { text: 'CAMERE', datafield: 'camere', width: 60, cellsalign: 'center' }, { text: 'BAGNI', datafield: 'bagni', width: 60, cellsalign: 'center' }, { text: 'PREZZO', datafield: 'prezzo', width: 100, cellsformat: 'F2', cellsalign: 'center' }, { text: '', datafield: 'Edit', width: 50, index: 'id', cellsalign: 'center', cellsrenderer: function(row) { var id3 = $("#jqxgrid2").jqxGrid('getcellvalue', row, "id"); return '<div style="text-align:center; margin-top:40px;"><ul><li onclick="TINY.box.show({iframe:\'http://www.xxxxxx.com/gestionaleimm/inserimento-nuovo-cliente.asp?admin=1\',width:300,height:150})"><img src="img/icona-scheda.png" border=0 width=30></li></ul></div>'; } }, { text: '', index: 'id', width: 50, cellsalign: 'center', cellsrenderer: function(row) { editrowindex = row; var id4 = $("#jqxgrid2").jqxGrid('getcellvalue', row, "id"); return '<div style="text-align:center;margin-top:50px;"><a href="modifica-dati-immobile.asp?idimm=' + id4 + ' "><img src="img/application_edit.png" border=0></a></div>'; } }, { text: '', index: 'foto', width: 200, cellsalign: 'center', cellsrenderer: function(row) { var idfoto = $("#jqxgrid2").jqxGrid('getcellvalue', row, "foto"); return '<div style="text-align:center; margin-top:12px;"><img src="http://www.xxxxxx.com/fotogallery-newimm/foto/' + idfoto + ' "><br><br></div>'; } } ] }); }); </script> </head> <body bgcolor="#bdbdbd" class='default'> <center> <table border=0 cellpadding=0 cellspacing=0 width=1200 bgcolor="b9b8b8"> <tr> <td height=80 colspan=2> <div style=margin-left:25px;> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid2"></div> </div> </div> </center></td></tr> </table> </body> </html>Hi giansard,
You can set the image’s height to a Fixed Width/Height and it will not be cut. Another option is to set the row’s height to a fixed number which is the default behavior of the Grid.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.