The search bar and paging in bootstrap 2.0 look bad.

elfozi

Good afternoon and sorry for my bad English thing is that I am using a translator.
I tell them my problem, I'm using bootstrap version 2.0 with the DataTables 1.9 and I have problems when I use it as follows

[code]


Seleccione Especialidad







Especialidades
Seleccionar



<?php if(count($this->especialidades)): ?>
<?php foreach($this->especialidades as $e):?>
<?php if($e->NOMBRE!=""):?>

<?php echo $e->NOMBRE?>
Seleccionar

<?php endif;?>
<?php endforeach;?>
<?php else: ?>

No hay registros

<?php endif;?>



Holaa



[/code]

The combobox to select the number of records, the text field to search and the pager buttons look out of place

But if I use it as follows looks good.

[code]


Pueden anotarse:



Nombre
Apellido
Tipo Documento
Nro Documento
Estado
Seleccionar




<?php if(count($this->puede)>=1):?>
<?php foreach($this->puede as $s):?>

<?php echo unserialize($s)->getNombre(); ?>
<?php echo unserialize($s)->getApellido(); ?>
<?php echo unserialize($s)->getTipoDoc(); ?>
<?php echo unserialize($s)->getDocumento(); ?>
<?php echo unserialize($s)->getEstado(); ?>
Seleccionar

<?php endforeach; ?>
<?php else: ?>

No hay registros
No hay registros
No hay registros
No hay registros
No hay registros
No hay registros

<?php endif;?>






No Pueden anotarse:



Nombre
Apellido
Tipo Documento
Nro Documento
Estado



<?php foreach($this->noPuede as $p){?>

<?php echo unserialize($p)->getNombre(); ?>
<?php echo unserialize($p)->getApellido(); ?>
<?php echo unserialize($p)->getTipoDoc(); ?>
<?php echo unserialize($p)->getDocumento(); ?>
<?php echo unserialize($p)->getEstado(); ?>

<?php };?>




[/code]
Any ideas?
Greetings and thank you very much everyone!

I have modified the CSS to work with bootstrap2 and js.

allan

Have you taken a look at this blog post: http://datatables.net/blog/Twitter_Bootstrap_2 ? The paging should be using the Bootstrap paging styles with that method. The select length menu however, yes that can be a bit out of place - if Bootstrap has a Javascript method to replace select menus, that could perhaps be used?

Allan

elfozi

Hi good morning, thanks for answering, I tell you that the post you sent me I already had seen and trying to prove some things try to modify this line
"Sodom": "<'row' <'span6'l> <' span6'f> r> t <'row' <'span6'i> <' span6'p >>"
I realized that the problem is with the span are already defined in bootstrap then CSS elements move and do not stay in position.
It's like the divs take up more space than it actually occupies the containing element and there is a difference.
Is there any way you could add or subtract pixels to compensate for the added or subtracted to bootstrap your CSS?

That is something like this:
example:
"Sodom": "<'row' <'span6 +10 px'l> <' span6-5px'f> r> t <'row' <'span6 +15 px'i> <' span6-2px'p >>"

Greetings and thank you very much again!.

elfozi

Hello, I'm back but with only half the solution but the problem I had changed things luegar was because the grid system used for the project that was the fluid-grid, and thus not used the means but with percentages in pixels.
To solve my problem instead of using fluid please use the common grid.
Being as follows:

[code]


Seleccione Especialidad







Especialidades
Seleccionar



<?php if(count($this->especialidades)): ?>
<?php foreach($this->especialidades as $e):?>
<?php if($e->NOMBRE!=""):?>

<?php echo $e->NOMBRE?>
Seleccionar

<?php endif;?>
<?php endforeach;?>
<?php else: ?>

No hay registros

<?php endif;?>



Holaa



[/code]

Greetings and thank you very much! :)