Tabla responsive en la que el contenido no es responsive

Tengo un problema con mi css. La tabla es responsive pero el contenido no. introducir la descripción de la imagen aquí Estoy utilizando boostrap y algunas clases customizadas. La tabla esta hecha con jquery y js.

Dejo las clases css también.

https://prizes.birdmc.us/dashboard/dist/css/style.css

No entiendo porque pasa, he intentado varias cosas como cambiar el tamaño de la tabla pero nada ha dado resultado.

    <div class="row">       <div class="col">         <div class="card mb-grid">           <div class="table-responsive-md">             <table id="example" class="table table-actions table-striped table-hover mb-0" data-table>               <thead>                 <tr>                   <th scope="col">1º Apellido</th>                   <th scope="col">2º Apellido</th>                   <th scope="col">nombre</th>                   <th scope="col">número de casa</th>                   <th scope="col">apuntes</th>                   <th scope="col">localización</th>                   <th scope="col">acciones</th>                 </tr>               </thead>               <tbody>                 <tr>                   <td>a</td>                   <td>a</td>                   <td>a</td>                   <td>1</td>                   <td>loremp isum</td>                   <td>                         <span class="badge badge-pill badge-primary">a, a</span>                       </td>                       <td>                         <button class="btn btn-sm btn-danger">Editar</button>                       </td>                     </tr>                   </tbody>                 </table>                 <script>                 $  (document).ready(function() {                     $  ('#example thead tr').clone(true).appendTo( '#example thead' );                     $  ('#example thead tr:eq(1) th').each( function (i) {                         var title = $  (this).text();                         $  (this).html( '<input type="text" placeholder="Buscar '+title+'" />' );                          $  ( 'input', this ).on( 'keyup change', function () {                             if ( table.column(i).search() !== this.value ) {                                 table                                     .column(i)                                     .search( this.value )                                     .draw();                             }                         } );                     } );                      var table = $  ('#example').DataTable( {                         orderCellsTop: true,                         fixedHeader: true                     } );                 } );                 </script>               </div>             </div>           </div>         </div> 

Se agradece la ayuda, un saludo.

TCPDF – SetAutoPageBreak Inicia el contenido de la siguiente página sobre el header y no debajo de el

Estoy trabajando con laravel y la librería TCPDF. Tengo poco usando TCPDF y me atore con las páginas que se generan de manera automática. Explico: Creo un formato de factura en html, por cada página se repetirá el header y el footer, si el contenido excede el tamaño de la pagina por lo siguiente se creara una siguiente pagina.

el problema es que el contenido del cuerpo de la factura se comienza a imprimir sobre el header y no debajo de el.

Les agradezco su ayuda. Saludos

Agrego unas fotos:

esta es la primera hoja, como veran tambien me mueve la imagen qr

Esta seria la segunda hoja, donde se puede notar que el contenido lo imprime sobre el header y yo espero que lo imprima debajo de el, y siempre la ultima hoja, la imagen del QR queda bien

Agrego mi codigo:

Esta es la primera clase que se llama para crear el pdf..

class PdfFunctions {     public static function create($  plantilla, $  data) {         if (file_exists($  _SERVER['DOCUMENT_ROOT'].'pdf/tmp.pdf'))             unlink($  _SERVER['DOCUMENT_ROOT'].'pdf/tmp.pdf');          if (file_exists($  _SERVER['DOCUMENT_ROOT'].'pdf/tmp.png'))             unlink($  _SERVER['DOCUMENT_ROOT'].'pdf/tmp.png');          $  obj = new PdfFunctions();         Session::put('config', $  plantilla->config);          $  configuracion = $  plantilla->config;         $  hotel = $  plantilla->config->hotel;         $  correos = $  plantilla->config->hotel->correos;         $  papel = $  plantilla->config->papel;         $  idioma = $  plantilla->idioma;         $  cadenaHeader = '';         $  cadenaBody = '';         $  cadenaFooter = '';          $  response = [];         $  html = '';         $  corte = '';         $  bandFooter = true;          if ($  configuracion->orientacion === 'P') {             $  alto = $  papel->alto;             $  ancho = $  papel->ancho;         } else {             $  alto = $  papel->ancho;             $  ancho = $  papel->alto;         }          $  estilos = '             <style type="text/css">                 .header {                  }                 .body {                  }                 .footer {                  }             </style>';          $  estilos = preg_replace('/\s+/', ' ', $  estilos);          $  cadena = preg_replace('/\s+/', ' ', $  configuracion->content_encabezado);         if ($  cadena !== '' && $  cadena !== NULL)             $  cadenaHeader = $  obj->getStringValues($  cadena, $  data);          $  cadena = preg_replace('/\s+/', ' ', $  configuracion->content_content);         if ($  cadena !== '' && $  cadena !== NULL)             $  cadenaBody = $  obj->getStringValues($  cadena, $  data);          $  cadena = preg_replace('/\s+/', ' ', $  configuracion->content_pie);         if ($  cadena !== '' && $  cadena !== NULL)             $  cadenaFooter = $  obj->getStringValues($  cadena, $  data);          $  header = $  cadenaHeader;         $  body = $  cadenaBody;         $  footer = $  cadenaFooter;          $  html = $  body;          Session::put('header', $  header);         Session::put('pie', $  footer);         Session::put('SetY', ($  configuracion->footer + $  configuracion->bottom_margin));          /*          * Constructor Inicial          */         $  pdf = new PDF($  configuracion->orientacion, $  configuracion->unidad_medida, [$  alto,                                                                                     $  ancho], true, 'UTF-8', false);          $  pdf->SetMargins($  configuracion->left_margin, $  configuracion->top_margin, $  configuracion->right_margin);          $  pdf->setPrintHeader(true);         $  pdf->setPrintFooter(true);          $  pdf->SetCreator('Yo Mero');         $  pdf->SetAuthor('Yo Merengues');         $  pdf->SetTitle('Yo Mero pdf by tcpdf');         $  pdf->SetAutoPageBreak(true, $  configuracion->bottom_margin);          $  font = TCPDF_FONTS::addTTFfont(asset('fonts/Roboto/Roboto-Regular.ttf'), 'sans-serif', '', 32);         $  pdf->SetFont($  font, '', $  configuracion->font_size);         $  pdf->AddPage();          $  pdf->writeHTMLCell(             $  w = 0,             $  h = ($  alto - (Session::get('new_header') + Session::get('new_footer'))),             $  x = '',             $  y = Session::get('new_header'),             $  html,             $  border = 0,             $  ln = 1,             $  fill = 0,             $  reseth = false,             $  align = '',             $  autopadding = true         );         //  End Inicial          /*          * Liberación del Objeto Inicial          */         unset($  pdf);         //  End Liberación          if ($  configuracion->content_pie === '' || $  configuracion->content_pie === NULL) {             $  corte = $  configuracion->bottom_margin;             $  bandFooter = false;         } else {             $  corte = Session::get('new_footer');             $  bandFooter = true;         }          /*          * Construcción Final          */         $  pdf = new PDF($  configuracion->orientacion, $  configuracion->unidad_medida, [$  alto,                                                                                     $  ancho], true, 'UTF-8', false);          $  pdf->SetMargins($  configuracion->left_margin, $  configuracion->top_margin, $  configuracion->right_margin);          $  pdf->setPrintHeader(true);         $  pdf->setPrintFooter($  bandFooter);          $  pdf->SetCreator('SiHoteles');         $  pdf->SetAuthor('SiHoteles');         $  pdf->SetTitle('SiHoteles pdf con tcpdf');         $  pdf->SetAutoPageBreak(true, $  corte);          $  font = TCPDF_FONTS::addTTFfont(asset('fonts/Roboto/Roboto-Regular.ttf'), 'sans-serif', '', 32);         $  pdf->SetFont($  font, '', $  configuracion->font_size);         $  pdf->AddPage();          $  pdf->writeHTMLCell(             $  w = 0,             $  h = ($  alto - (Session::get('new_header') + Session::get('new_footer'))),             $  x = '',             $  y = Session::get('new_header'),             $  html,             $  border = 0,             $  ln = 1,             $  fill = 0,             $  reseth = false,             $  align = '',             $  autopadding = true         );         //  End Final          Session::forget('config');         Session::forget('new_header');         Session::forget('new_footer');         Session::forget('header');         Session::forget('pie');         Session::forget('SetY');          return $  pdf->Output('tmp.pdf', 'E');     }      public     function getStringValues($  cadena, $  data) {         $  htmlAux = preg_split("'<\?php(.*?)\?>'", $  cadena);         preg_match_all("'<\?php(.*?)\?>'", $  cadena, $  php);         $  php = $  php['1'];          $  aux = 0;         ob_start();         foreach ($  htmlAux as $  key => $  value) {             echo $  value;             if (isset($  php[$  aux])) {                 eval($  php[$  aux]);                 $  aux++;             }         }          return ob_get_clean();     } } 

Esta es la clase del custom header and footer:

class PDF extends TCPDF {     public function Header() {         $  font = TCPDF_FONTS::addTTFfont(asset('fonts/Roboto/Roboto-Regular.ttf'), 'sans-serif', '', 32);         $  this->SetFont($  font, '', Session::get('config.font_size'));         $  this->writeHTMLCell(             $  w = 0,             $  h = Session::get('config.header'),             $  x = '',             $  y = Session::get('config.top_margin'),             Session::get('header'),             $  border = 0,             $  ln = 1,             $  fill = 0,             $  reseth = true,             $  align = '',             $  autopadding = true         );          Session::put('new_header', ($  this->getLastH() + Session::get('config.top_margin')));     }      public function Footer() {         $  this->SetY(Session::get('SetY'));         $  font = TCPDF_FONTS::addTTFfont(asset('fonts/Roboto/Roboto-Regular.ttf'), 'sans-serif', '', 32);         $  this->SetFont($  font, '', Session::get('config.font_size'));         $  this->writeHTMLCell(             $  w = 0,             $  h = Session::get('config.footer'),             $  x = '',             $  y = '',             Session::get('pie'),             $  border = 0,             $  ln = 1,             $  fill = 0,             $  reseth = true,             $  align = '',             $  autopadding = true         );          Session::put('new_footer', ($  this->getLastH() + Session::get('config.bottom_margin')));         Session::put('SetY', '-'.Session::get('new_footer'));          $  this->Cell(0, 0, 'Hoja '.$  this->getAliasNumPage().'/'.$  this->getAliasNbPages(), 0, false, 'C', 0, '', 0, false, 'T', 'M');     } } 

cargar contenido html en view Source angular

Buenas soy un poco nuevo en angular y me gustaría saber como hacer para que muestre el contenido html en viewSource de la página, para algunas de las secciones mas estáticas y de cara a SEO, como el como funciona etc etc.

He visto varias paginas en angular que lo estan haciendo por ejemplo en esta: como funciona

Aquí podemos ver como muestran el código “abierto” de <cnv-root> en la home y todo lo que serian paginas “corporativas” también, pero si ya vas al login o las funcionalidades dentro de la aplicación como el login

Como puedo obtener la posicion de un item en un spinner sabiendo su contenido?

tengo una actividad en la que guardo los valores de un spinner (solamente el contenido) en una base de datos MySQLI, pero además tengo una actividad en la cual modifico los valores de esa columna de la base de datos con otro spinner, pero para eso primero obtengo los datos de la base de datos, los modifico y se actualizan (eso deberia hacer) pero tengo la duda de como hacerlo, pensaba en algo como “spinner.setPosition where contenido = 20” Cabe mencionar que son 2 spinners y cada uno obtiene los valores de una forma diferente, siendo una de el archivo strings.xml de un y el otro de la forma que se muestra abajo

//ADAPTADOR DEL SPINNER DE SEXO     ArrayAdapter<CharSequence> adapterSexo = ArrayAdapter.createFromResource(this,             R.array.sexo_array, android.R.layout.simple_spinner_item);     adapterSexo.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);     //ADAPTADOR DEL SPINNER DE EDAD     List<String> numeros = new ArrayList<String>();     for (int x = 14; x <= 25; x++) {         numeros.add(String.valueOf(x));     }     //Se le asigna el adaptador al spinner de edad     edad.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, numeros));     //Se le asigna el adaptador al spinner de sexo     sexo.setAdapter(adapterSexo); 

Aqui es donde ocupo hacer los updates pero no se como 🙁 `

private void Buscar() {         AdminSQLiteOpenHelper admin = new AdminSQLiteOpenHelper(this, "baseDatos", null, 1);         SQLiteDatabase database = admin.getWritableDatabase();          String name = nombre.getText().toString();          if (!name.isEmpty()){             Cursor row = database.rawQuery("SELECT nombre, domicilio, sexo, edad FROM usuarios WHERE nombre='"+name+"'", null);             if (row.moveToFirst()){                 nombre.setText(row.getString(0));                 domicilio.setText(row.getString(1)); //Se que esta mal de esta manera pero espero haberme dado a entender                 String x = row.getString(2);                 sexo.setSelection(Integer.parseInt(x)); //--------------------------------SPINNERS-----------------------------------                 sexo.setText(row.getString(2));                 edad.setText(row.getString(3)); //---------------------------------------------------------------------------                 database.close();             } else{                 Toast.makeText(this, "No existe el usuario", Toast.LENGTH_LONG).show();                 database.close();             }         }else{             Toast.makeText(this, "Favor de introducir un nombre", Toast.LENGTH_LONG).show();             database.close();         }     }` 

Problema para centrar un contenido

Estoy tratando de centrar esto pero no lo logro, está en una versión antigua de bootstrap (v3.3.6) y no la puedo actualizar porque se rompe todo el template si lo hago, el código es el siguiente

<div class="normal-table-area">         <div class="container">             <div class="row">                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pd-x-auto">                     <div class="normal-table-list">                         <div class="basic-tb-hd">                             <img src="{{ asset('img/profile.jpg') }}" alt="Foto de perfil" class="img-thumbnail">                         </div>                         <div class="bsc-tbl">                             <table class="table table-bordered">                                 <tbody>                                     <tr>                                         <td><b>Apellidos:</b></td>                                         <td>Alexandra</td>                                     </tr>                                     <tr>                                         <td><b>Nombres:</b></td>                                         <td>Madeleine</td>                                     </tr>                                     <tr>                                         <td><b>Sexo:</b></td>                                         <td>Sebastian</td>                                     </tr>                                     <tr>                                         <td><b>Nivel:</b></td>                                         <td>Elizabeth</td>                                     </tr>                                     <tr>                                         <td><b>Sección:</b></td>                                         <td>Elizabeth</td>                                     </tr>                                     <tr>                                         <td><b>Correo de verificación:</b></td>                                         <td>Benjamin</td>                                     </tr>                                     <tr>                                         <td><b>Correo estudiantil:</b></td>                                         <td>Katherine</td>                                     </tr>                                 </tbody>                             </table>                         </div>                     </div>                 </div>             </div>         </div>     </div>  

Como ven está en un patrón de 6 columnas, lo que quisiera es lograr que se centre dejando 3 columnas a los lados y centrar esa imagen dentro del div que se encuentra, porque está pegada a la derecha, ya he tratado de poner margins y paddings en auto pero no funciona. No soy bueno manejando CSS por lo que no sé que otra cosa intentar a parte de eso.

Así se encuentra actualmente

Actualizar el contenido de la tabla después de enviar formulario

Tengo una tabla con el plugin DataTables con datos traidos de una base de datos. Además, tengo un botón para agregar un nuevo registro. Una vez que ingrese todos los datos para el nuevo registro y presiono el botón enviar, quiero actualizar el contenido de la tabla sin cargar la página (sin F5). Cualquier sugerencia será bienvenida.

Este es mi codigo:

Base de datos

db.define_table('Student',             Field('name', 'string', label='Name'),             Field('last_Name', 'string', label='Last Name'),             Field('age', 'integer', label='Age'),             Field('nationality', 'string', label='Nationality'),            ) 

Controlador (Tools.py)

def studentNew(): formStudent=crud.create(db.Student) if formStudent.accepted:     response.js = '(function($  ) {$  ("#myModalADD").modal("hide");}(jQuery));'  //hide modal after press submit button     response.flash = 'Record added successfully!' //displays message after press submit return dict(formStudent=formStudent) 

Vista

    <script>     $  (document).ready(function(){        tabla= $  ('#table').DataTable( {            'scrollX': true,            'responsive':true,            'sRowSelect': "single",           }); </script>  <div id="some_btn"><a class="btn btn-success btn-mini" data-target="#myModalADD" data-toggle="modal" data-backdrop="static" data-keyboard="false"><i class="icon-search icon-white"></i> Add New Student</a></div>  <table id="table" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >    <thead>        <tr>           <th>Name</th>           <th>Last Name</th>           <th>Age</th>           <th>Nationality</th>        </tr>     </thead>     <tbody>         {{for student in formListar:}}             <tr>                 <td>{{=student.Student.name}}</td>                 <td>{{=student.Student.last_name}}</td>                 <td>{{=student.Student.age}}</td>                 <td>{{=student.Student.nationality}}</td>             </tr>         {{pass}}     </tbody> </table>  <div id="myModalADD" class="modal fade">   <div class="modal-dialog" role="document">     <div class="modal-content">       <div class="modal-header">        <h4 class="modal-title">Add New Student</h4>       </div>       <div class="modal-body"> {{=LOAD('Tools','studentNew', ajax=True, ajax_trap=True)}}</div>       <div class="modal-footer">           <div class="col-md-6 col-md-offset-3 ">         <button type="button" id="cancelar" class="btn btn-secondary" data-dismiss="modal">Cancel</button>          </div>       </div>     </div>   </div> </div> 

¿Cómo puedo paginar el contenido de un tab-content?

Tengo un tab-content en el index y en el tab-pane se muestran los productos, sólo 6 productos por “página”, pero no logro hacer que el paginador funcione de manera correcta, la idea es que carguen los productos siguientes de ese tab al hacer click en el paginador y así con cada tab. Este es el código hasta ahora…

<div class="tab-pane fade clearfix" id="v-pills-artwork" role="tabpanel" aria-labelledby="v-pills-artwork-tab">                 <h4 class="m-4 ">Art Work</h4>                 <?php                 $  max=6;                 $  pag=0;                 if(isset($  _GET[pag]) && $  _GET[pag] <>""){                     $  pag=$  _GET[pag];                     }                 $  inicio=$  pag * $  max;                 $  query="SELECT * FROM products WHERE category= 'ART WORK' ORDER BY date DESC ";                 $  query_limit= $  query ." LIMIT $  inicio,$  max";                 $  resource = $  conn->query($  query_limit);                 if (isset($  _GET[total])) {                     $  total = $  _GET[total];                     } else {                     $  resource_total = $  conn -> query($  query);                     $  total = $  resource_total->num_rows;                     }                 $  total_pag = ceil($  total/$  max)-1;                 ?>                 <?php if($  total){?>                 <?php while ($  row = $  resource->fetch_assoc()){?>                  <div class="card col-sm-4 float-left m-2">                     <img src="images/products/<?php echo $  row[productcode]?>.JPG" alt="<?php echo $  row[product]?>" class="img-fluid rounded card-img-top">                 <div class="card-body">                     <h6 class="card-text"><strong><a href="product-2.php?id=<?php echo $  row[id]?>"><?php echo $  row[product]?></a></strong></h6> <br> <p align="center"><strong>Price: $  <?php echo number_format($  row[price]);?></strong></p>                 </div>                 </div>                  <?php }?>                 <?php  }else{?>                     <p class="error"> Results not found.</p>                 <?php }?>                 <div class="col-sm-12 d-flex justify-content-center">                 <div class="pagination-div">                          <ul class="pager">                             <?php if($  pag-1 >= 0){?>                             <li>                                 <a href="index.php?pag=<?php echo $  pag -1?>&total=<?php echo $  total?>"> < </a>                             </li>                             <?php }?>                             <li> <?php echo ($  inicio + 1) ?> to <?php echo min($  inicio + $  max, $  total) ?> of <?php echo $  total ?> </li>                             <?php if($  pag +1 <= $  total_pag ){?>                             <li>                                 <a href="index.php?pag=<?php echo $  pag +1?>&total=<?php echo $  total?>"> > </a>                             </li>                             <?php }?>                         </ul>                 </div>                 </div>             </div>  

Funciona si está directo en el index, pero dentro del tab no funciona, no se cómo tendría que hacerlo para que se devuelva solo a esa parte de la página y no al index, he probado enviandolo al id del div pero tampoco me resultó. Espero me entiendan y puedan ayudarme, gracias!

Actualizar contenido de un div JQuery

Estoy intentando actualizar el contenido de un div en JQuery. El div sólo tiene un número y tengo que actulizar la capa sumando ese número más otro número que hay en un input que le mete el usuario. Es decir, la operación sería el contenido del div más el contenido del input, lo intento hacer pero no se actuliza, sigue con el número que tenía desde el principio siempre y no salta ningún error. Pongo el código por si he puesto algo mal sin darme cuenta.

$  (contenidoDiv).html($  (contenidoDiv).html()+$  ("#cantidadProducto").val()); 

contenidoDiv es una variable con el contenido del div que tengo que actualizar y cantidadProducto es el id del input type number que contiene el número que hay que sumar.

¿Como puedo copiar el contenido del textarea correspondiente?

El usuario, a través de unos formularios va creando divs. Los divs se van añadiendo a un container (bootstrap). Cada div está compuesto por la misma estructura, mismas clases, id’s, nombres… y se muestran varios elementos. Uno de ellos es el textarea, y cada textarea contiene un texto distinto.

Lo que necesito es que cuando se dé el evento click en el botón de copiar dentro de cada uno de los textarea se seleccione y copie el textarea en cuestión. ¿Igual la solución es seleccionar los textarea con previousSibling? (No consigo localizarlo)

// Constructor UI  class UI { 	copyTextarea(element){         if (element.name === 'copiar') {             document.getElementById("textarea").select()             document.execCommand("copy");         }     } }  // Eventos DOM  document.getElementById('simulador')     .addEventListener('click', function (e) {         const ui = new UI();         ui.copyTextarea(e.target);         e.preventDefault();     });
.container-btn-mtg{ 	text-align: center;     margin-top: 14px;     margin-bottom: 2em; }
<link rel="stylesheet" href="https://bootswatch.com/4/lumen/bootstrap.min.css">  <div id="simulador" class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8"> 	<div> 		<textarea id="textarea" class="form-control response" readonly="" rows="7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea> 		<div class="container container-btn-mtg"> 			<button type="button" class="btn btn-success" id="copiar" name="copiar">Copiar</button>&nbsp;&nbsp;&nbsp; 			<a href="#" class="btn btn-danger" name="delete-ejemplo">Borrar</a> 		</div> 	</div> 	<div>     <textarea class="form-control response" readonly="" rows="7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea> 		<div class="container container-btn-mtg"> 			<button type="button" class="btn btn-success" id="copiar" name="copiar">Copiar</button>&nbsp;&nbsp;&nbsp; 			<a href="#" class="btn btn-danger" name="delete-ejemplo">Borrar</a> 		</div> 	</div>  <div>   <textarea class="form-control response" readonly="" rows="7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea> 	<div class="container container-btn-mtg"> 		<button type="button" class="btn btn-success" id="copiar" name="copiar">Copiar</button>&nbsp;&nbsp;&nbsp; 		<a href="#" class="btn btn-danger" name="delete-ejemplo">Borrar</a> 	</div> </div> </div> <script type="text/javascript" src="/app.js"></script>

Todos los botones de copiar seleccionan el mismo textarea… 🙁