Un usuario preguntó 👇
¡Hola Tobias!
En primer lugar, ¡gracias por el gran plugin! Es una locura que te ofrezcan un plugin avanzado con excelente soporte, todo gratis. No mucho, pero hice una pequeña donación como agradecimiento.
Estaba jugando con la extensión TablePress + DataTables Button y encontré que casi todo funcionaba como quería al eliminar fragmentos de código de los materiales de respaldo antiguos, pero esta vez estoy perplejo.
La tabla en la página que vinculé en el formulario de soporte no se extiende a 720 px para llenar toda la página del escritorio. Quiero que haga eso, como lo hace aquí:
https://www.howtogames.nl/guides/animal-crossing-new-horizons-acnh/encyclopedie/alle-insecten-lijst/
No estoy seguro de qué hice bien para estirarlo en esa página, o qué estoy haciendo mal en la nueva página. Estoy usando el siguiente CSS en las Opciones de plugin (probablemente muy predecible ya que reciclé una gran cantidad de código que encontré y no soy un experto en CSS):
.tablepress-id-1 tbody td,
.tablepress-id-2 tbody td {
font-size: 10px;
vertical-align: middle;
}
.tablepress thead th,
.tablepress tfoot th {
background-color: #3b8e50;
font-weight: bold;
font-size: 10px;
color: #ffffff;
}
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
background-color: #e89a00;
color: #ffffff;
}
.tablepress .column-1,
.tablepress .column-2,
.tablepress .column-4,
.tablepress .column-5,
.tablepress .column-6,
.tablepress .column-7,
.tablepress .column-8,
.tablepress .column-9,
.tablepress .column-10,
.tablepress .column-11,
.tablepress .column-12,
.tablepress .column-13,
.tablepress .column-14,
.tablepress .column-15,
.tablepress .column-16,
.tablepress .column-17,
.tablepress .column-18,
.tablepress .column-19 {
text-align: center;
}
.tablepress-id-1 .column-2,
.tablepress-id-2 .column-2 {
font-weight: bold;
}
a.dt-button,
button.dt-button,
div.dt-button {
background-image: none;
background-color: #3b8e50;
color: #ffffff;
}
a.dt-button:hover,
button.dt-button:hover,
div.dt-button:hover {
background-image: none !important;
background-color: #e89a00 !important;
color: #ffffff;
}
div.dt-button-collection button.dt-button.active:not(.disabled) {
background-image: none !important;
background-color: #e89a00 !important;
color: #ffffff;
}
@media screen and (min-width: 800px) {
.dataTables_wrapper,
.dataTables {
width: 720px !important;
margin: 0 auto 1em;
}
}
.tablepress-id-1 .column-1,
.tablepress-id-2 .column-1 img {
max-width: 50px;
height: auto;
}
.dt-buttons {
float: left !important;
width: 30%;
}
.dataTables_filter {
float: right;
width: 30%;
padding-right: 10px;
}¿Tienes idea de cómo podría configurar el ancho de la mesa? Entiendo que la tabla cambiará automáticamente cuando agregue / oculte columnas con los botones y eso está bien, por supuesto.
Además, creo que una vez pregunté si había alguna forma de mostrar el botón y el cuadro de búsqueda en una línea, y la respuesta en ese momento fue que no era posible. ¿Quizás se le ocurran nuevas ideas? Casi lo encontré funcionando con float: left y floating: right pero no perfecto.
¡Gracias de antemano por cualquier información / ayuda!
(@tobiasbg)
Hace 10 meses
Hola,
gracias por tu publicación y perdón por las molestias.
No se preocupe, realmente no está haciendo nada malo aquí. Es posible que solo necesitemos un cambio. ¿Puedes reemplazar, por favor?
.dataTables_wrapper,
.dataTables {
width: 720px !important;
margin: 0 auto 1em;
}le
.dataTables_wrapper,
.tablepress {
width: 100% !important;
margin: 0 auto 1em;
}Debería resolver ese problema de ancho.
En cuanto a la ubicación del botón, puedes probar una extensión
.dt-buttons {
float: left !important;
width: 30%;
}le
padding-top: 20px;
Saludos, Tobias
(@kubuskwal)
Hace 10 meses
¡Eso funcionó perfectamente! ¡Muchas gracias!
La ubicación del botón parece haberse perdido desde un punto de vista móvil, pero veré si puedo jugar con algunas preguntas adicionales de los medios :).
¡Gracias de nuevo!
(@tobiasbg)
Hace 10 meses
Hola,
¡Es bueno escuchar que esto ayudó!
Este CSS puede causar una ubicación diferente en los teléfonos móviles en el archivo CSS de los botones:
@media screen and (max-width: 640px) {
div.dt-buttons {
float: none !important;
text-align: center;
}
}Puede intentar superarlo en su «CSS personalizado» con
@media screen and (max-width: 640px) {
.dataTables_wrapper div.dt-buttons {
float: left !important;
text-align: left;
}
}Saludos, Tobias
(@kubuskwal)
Hace 10 meses
¡Woah, nunca se me ocurriría esa solución! Como era de esperar, funciona a la perfección: D.
¡Gracias de nuevo por la ayuda adicional! 🙂
(@tobiasbg)
Hace 10 meses
Hola,
no hay problema, ¡de nada! 🙂 ¡Es bueno escuchar que esto ayudó!
Todo lo mejor, Tobias
PD: En caso de que no lo tenga, califique TablePress aquí en el directorio de plugins. ¡Gracias!
¿Solucionó tu problema??
0 / 0