9
Tengo un problema jQuery muy extraño.Altura de la barra de título jQuery afectada por div flotante
tengo un div de navegación izquierda con este CSS:
#nav {
float: left;
width: 25%;
padding: 10px;
margin-top: 1px;
}
tengo un div cuerpo con este CSS:
#body {
margin-left: 30%;
margin-top: 1px;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
para jQuery que utiliza puntales de plugin
sjg:grid
id="gridtable"
caption="Customer Examples"
dataType="json"
href="%{remoteurl}"
pager="true"
gridModel="gridModel"
rowList="10,15,20"
rowNum="-1"
rownumbers="true"
editurl="%{editurl}"
editinline="true"
onSelectRowTopics="rowselect"
onEditInlineSuccessTopics="oneditsuccess"
viewrecords="true"
Cuando coloco la cuadrícula de jQuery en el cuerpo, su barra de título se estira para coincidir con la altura del div de navegación. Si elimino el navegador izquierdo, la cuadrícula se muestra bien.
He intentado todo y buscado en Google hasta que estoy azul en mi cara.
Agradecería cualquier consejo.
Editado para añadir:
struts grid tag opens into
jQuery(document).ready(function() {
jQuery.struts2_jquery.require("js/struts2/jquery.grid.struts2"+jQuery.struts2_jquery.minSuffix+".js");
var options_gridtable = {};
var options_gridtable_colmodels = new Array();
var options_gridtable_colnames = new Array();
options_gridtable_colmodels_id = {};
options_gridtable_colmodels_id.name = "id";
options_gridtable_colmodels_id.jsonmap = "id";
options_gridtable_colmodels_id.index = "id";
options_gridtable_colmodels_id.formatter = "integer";
options_gridtable_colmodels_id.editable = false;
options_gridtable_colmodels_id.sortable = false;
options_gridtable_colmodels_id.resizable = true;
options_gridtable_colmodels_id.search = true;
options_gridtable_colnames.push("ID");
options_gridtable_colmodels.push(options_gridtable_colmodels_id);
options_gridtable_colmodels_name = {};
options_gridtable_colmodels_name.name = "name";
options_gridtable_colmodels_name.jsonmap = "name";
options_gridtable_colmodels_name.index = "name";
options_gridtable_colmodels_name.editable = false;
options_gridtable_colmodels_name.sortable = true;
options_gridtable_colmodels_name.resizable = true;
options_gridtable_colmodels_name.search = true;
options_gridtable_colnames.push("Name");
options_gridtable_colmodels.push(options_gridtable_colmodels_name);
options_gridtable.datatype = "json";
options_gridtable.url = "/moneypulse2app/person/jsontable.action";
options_gridtable.height = 'auto';
options_gridtable.pager = "gridtable_pager";
options_gridtable.pgbuttons = true;
options_gridtable.pginput = true;
options_gridtable.rowNum = -1;
options_gridtable.rowList = [10,15,20];
options_gridtable.viewrecords = true;
options_gridtable.editinline = true;
options_gridtable.caption = "Customer Examples";
options_gridtable.autoencode = true;
options_gridtable.rownumbers = true;
options_gridtable.onselectrowtopics = "rowselect";
options_gridtable.oneisuccess = "oneditsuccess";
options_gridtable.colNames = options_gridtable_colnames;
options_gridtable.colModel = options_gridtable_colmodels;
options_gridtable.jsonReader = {};
options_gridtable.jsonReader.root = "gridModel";
options_gridtable.jsonReader.page = "page";
options_gridtable.jsonReader.total = "total";
options_gridtable.jsonReader.records = "records";
options_gridtable.jsonReader.repeatitems = false;
options_gridtable.jqueryaction = "grid";
options_gridtable.id = "gridtable";
jQuery.struts2_jquery_grid.bind(jQuery('#gridtable'),options_gridtable);
});
Es un poco difícil para compartirlo en jsfiddle.net causa de todos los scripts jQuery. Puede ser esta parte HTML aclarar algo:
<div style="width: 325px;" class="ui-state-default ui-jqgrid-hdiv">
<div class="ui-jqgrid-hbox">
<table cellspacing="0" cellpadding="0" border="0" aria-labelledby="gbox_gridtable"
role="grid" style="width: 325px;" class="ui-jqgrid-htable">
<thead>
<tr role="rowheader" class="ui-jqgrid-labels">
<th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader"
id="gridtable_rn" style="width: 25px;">
<div id="jqgh_rn">
<span style="display:none" class="s-ico">
<span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"
sort="asc"></span>
<span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"
sort="desc"></span>
</span>
</div>
</th>
<th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader"
id="gridtable_id" style="width: 143px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr"
style="cursor: col-resize;"> </span>
<div id="jqgh_id" class="ui-jqgrid-sortable">
ID
<span style="display:none" class="s-ico">
<span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"
sort="asc"></span>
<span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"
sort="desc"></span>
</span>
</div>
</th>
<th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader"
id="gridtable_name" style="width: 142px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr"
style="cursor: col-resize;"> </span>
<div id="jqgh_name" class="ui-jqgrid-sortable">
Name
<span style="display:none" class="s-ico">
<span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"
sort="asc"></span>
<span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"
sort="desc"></span>
</span>
</div>
</th>
</tr>
</thead>
</table>
</div>
</div>
Además, después de jugar en Firebug parece que la modificación de este artículo css en encabezado de la cuadrícula fija un poco el problema:
.ui-helper-clearfix {
display: block;
}
Si quito pantalla: bloque: el título se contrae a la altura adecuada pero a un ancho pequeño.
Su código de Jquery ayudaría también. – Basic
Crea un pequeño ejemplo en jsfiddle.net. Será mucho más fácil saber qué está pasando en ese momento. –
Si no flotas el navegador, ¿la red sigue siendo realmente grande? –