Me explican el porque en google chrome me sucede esto:
- aparece tremendo scroll bar inferior
- el scroll bar de la datatable mueve los datos pero no las columnas
- al presionar sobre una columna esta se agranda
Esto no sucede en Internet Explorer, asi que no entiendo que esta mal...
Pliz, ayudenme T_T.
Código HTML:
<script type="text/javascript" src="js/proyectos/proyectos_listar.js"></script> <!--<fieldset class="ui-widget ui-widget-content ui-corner-all"> <legend class="titulo_box ui-widget ui-widget-header ui-corner-all">Listar Concursos</legend>--> <div class="titulo_box ui-widget ui-widget-header ui-corner-all"> <span class="ui-icon ui-icon-folder-open icono-left"></span> Listar Proyectos </div> <br/> <?php include("vista/plan_trabajo.php"); include("vista/avance_gestion/gestion.php"); include("vista/final_gestion/gestion.php"); include("vista/concursos/test.php"); ?> <fieldset class="ui-widget ui-widget-content ui-corner-all" > <legend class="titulo-pags ui-widget ui-widget-header ui-corner-all">Seleccione criterios de búsqueda:</legend> <br/> <div id="format"> <input type="checkbox" id="check1"/><label for="check1" title="Estado proyecto">Estado</label> <input type="checkbox" id="check2"/><label for="check2" title="Año de proyecto">Año:</label> <input type="checkbox" id="check3"/><label for="check3" title="Entre Fechas de inicio y término de proyecto">Rango de Fechas</label> <input type="checkbox" id="check4"/><label for="check4" title="Institución">Institución</label> <input type="checkbox" id="check5"/><label for="check5" title="Entre rango de montos asignados">Monto Asigando</label> </div> <!-- **********************************************************************// ******************DIVS OCULTOS PARA BUSQUEDA**************************// **********************************************************************// --> <div class="botones"> <div id="divEstado" class="divBlock"> <br/>Estado: <select id="cmb_estado"></select> </div> <div id="divAnio" class="divBlock"> <br/>Año <input type="text" size="10" id="txt_anio" name="txt_anio" readOnly="readOnly"/> </div> <div id="divRango" class="divBlock"> <br/>Entre el <input type="text" size="10" id="txt_fecha_ini" name="txt_fecha_ini" readOnly="readOnly"/> y el <input type="text" size="10" id="txt_fecha_ter" name="txt_fecha_ter" readOnly="readOnly"/> </div> <div id="divInstitucion" class="divBlock"> <br/>Institución: <input type="text" id="txt_institucion" name="txt_institucion" size="40" class="validate[required]"/> <img src="img/iconos/lupa.png" class="x16 puntero" title="Buscar Institución" onclick="buscar_institucion()"/> </div> <div id="divMonto" class="divBlock"> <br/>Entre $<input type="text" size="20" id="txt_monto_ini" name="txt_monto_ini" readOnly="readOnly"/> y $<input type="text" size="20" id="txt_monto_ter" name="txt_monto_ter" readOnly="readOnly"/> </div> <br/> <button onclick="buscar_proyectos()" type="button" title="Buscar Proyectos"> <img src='img/iconos/lupa.png' class="x16" alt=""/> Buscar Proyectos</button> </div> <br/> </fieldset> <br/> <!-- //**********************************************************************// //************************* data table *********************************// //**********************************************************************// --> <fieldset class="ui-widget ui-widget-content ui-corner-all"> <legend class="titulo-pags ui-widget ui-widget-header ui-corner-all">Listado de Proyectos: </legend> <br/> <div id="proyectos-contain" class="ui-widget"> <table id="tabla-proyectos" class="ui-widget ui-widget-content display" width="50%"> <thead class="ui-widget-header" > <tr> <th title="Nombre Concurso">Concurso</th> <th title="Nombre Institución">Institución</th> <th>Zona</th> <th>Línea</th> <th title="Nombre Proyecto">Proyecto</th> <th>Estado</th> <th title="Fecha Inicio Proyecto">Fecha Ini.</th> <th title="Fecha Término Proyecto">Fecha Ter.</th> <th title="Nº Beneficiarios Directos">Ben. Directos</th> <th title="Duración en Nº de meses">Duración</th> <th>Monto Aprobado</th> <th>Acciones</th> </tr> </thead> <tbody id="dinamico" style="height:250px;"> </tbody> </table> </div> <div class="botones"> <br/> <button onclick="nuevo_proyecto()" type="button" title="Añadir Nuevo Proyecto"> <img src='img/iconos/add.png' class="x16" alt=""/> Nuevo Proyecto</button> <button onclick="ventanaNueva('vistas/reportes/listado_usuariosPDF.php')" type="button" title="Generar documento PDF"> <img src='img/iconos/icono_pdf.gif' class="x16" alt=""/> Generar PDF</button> </div> <br/> </fieldset> <br/>
Código:
//*******************************************************************************// //inicializa datatable users //*******************************************************************************// $(document).ready(function(){ var oTable = $('#tabla-proyectos').dataTable( { //"sPaginationType": "full_numbers", "bJQueryUI": true, "sScrollX": "100%", "sScrollY": "252px", "bFilter": false, "sScrollX": "100%", "sScrollXInner": "110%", "bScrollCollapse": true, "oLanguage": { "sUrl": "js/dataTables.espanol.txt"}, "aoColumns": [ null, null, null, null, null, null, null, null, null, null, null, { "bSortable": false } ] } ); });