Bootstrap Framework: anchos de columna personalizados en tablas.

En la versión 3 de Bootstrap apareció la posibilidad de hacer las tablas responsive y adaptar de forma dinámica el contenido. Sin embargo, no hay mayor flexibilidad en cuanto a la manipulación de tamaño de las columnas. A continuación, explico un truco muy simple para los que se han topado con el problema de querer tener anchos de columna personalizados en tablas en Bootstrap.

Partimos del siguiente ejemplo de tabla:

Digamos que una vez que se procesa la tabla, el campo descripción es demasiado grande y empuja el resto de columnas haciéndolas más pequeñas de lo que deberían ser. La forma más rápida de solucionar este problema es simplemente dar tamaños de las columnas de los encabezados de la tabla. Para ello, podemos aprovecharnos de las clases que nos proporciona el grid de Bootstrap:

Sea cual sea el ancho de la tabla de cabeceras tus datos de la tabla se ajustarán a ese tamaño.

Muy sencillo y funciona a la perfección.

Bonus: Esto funciona también en Bootstrap 2, usando las clases span* en su defecto (para los que como yo, sigan desarrollando en sitios web que necesiten un extra de compatibilidad con navegadores antiguos).

Debug de código mediante emulación de dispositivos y Media Types en Google Chrome

Últimamente, en mi trabajo, el desarollo frontend se ha incrementado considerablemente, y me he encontrado en la situación de tener que realizar varios contenidos web con formato muy especifico para su visualización en versión web, como en versión impresa, como ya os imaginaréis es contenido con resultados estadísticos, e informes, por lo que la versión impresa de la web cobra un papel muy importante.

Hasta hace relativamente poco tiempo, este trabajo era bastante pesado, puesto que no había apenas herramientas de depuración de código CSS para los diferentes Media Types (y además, teniendo en cuenta de que la gran mayoría fueron implementandos en CSS2…).

Desde el primero momento, supuse que Google Chrome, con sus Developer Tools, tendría que tener algún “as” bajo la manga, para facilitarnos la tarea, pero me resulto curioso que no encontré dicha opción en las herramientas. Tras ponerme a indigar por Google descubrí no sólo tenía una herramienta que facilitaba la tarea, era un completo emulador de todos los Media Types y por supuesto incluyendo su completo set de herramientas como inspector de elementos HTML, modificación de estilos CSS en vivo, etc…

El problema de esto, es que los desarrolladores de Chromium (versión base de Google Chrome) han movido (escondido) en repetidas ocasiones esta funcionalidad, y han conseguido despistar a más de uno.

En este momento (Versión 37.0.2062.120 m) se encuentran en:Debug de código y emulación de dispositivos en Chrome

  1. Chrome Developer Tools
    • Linux/Windows: ctrl + shift + j o F12
    • Mac: cmd + alt + j o F12
  2. Si no se abre automáticamente el Drawer, apretamos ESC.
  3. En el Drawer de la consola, veremos una pestaña que pone “Emulation”, aquí es donde actualmente han centralizado la Emulación del navegador:
    1. Devices: Para emular dispositivos en función del modelo, resolución etc…
    2. Media: Para emular Media Types.

Esta funcionalidad nos puede ahorrar un tiempo increíble a la hora de depurar código en desarrollo web, añadiendo toda la potencia que tiene el inspector de las Google Chrome Developer Tools, y su previsualizador en tiempo real.

Texto vertical con CSS (cross-browser)

El otro día haciendo unos ajustes en un proyecto, sé me presentó la necesidad de tener que mostrar un texto orientado de forma vertical. Como soy un poco reacio a utilizar imágenes para estas cosas, prefiero buscar soluciones CSS que en la mayoría de casos de este tipo suelen existir.

Si queremos mostrar un texto vertical con css, basta con añadir al elemento html (p,  div..) una clase con los siguientes estilos:

Los grados por supuesto, podemos ajustarlo a nuestras necesidades.

Si quieres ampliar información visita stackoverflow.