Image
Ampliar caja de contenido en Drupal
Ampliar caja de contenido en Drupal

Tutorial para ampliar caja de contenido en Drupal. En muchas ocasiones, en el desarrollo de portales con Drupal, nos encontramos con que queremos ampliar una caja, de tal forma que cuando se añadan diferentes opciones, el usuario lo pueda visualizar y eliminar lo quiera sin problema. 

Tal como lo tenemos ahora, es imposible.

Image
Ampliar caja de contenido en Drupal

Para ello, lo primero que tendremos que hacer es inspeccionar la caja pulsando click derecho sobre ésta y añadirle a su contenedor un width 100% para que nos abarque todo el ancho.

Image
Ampliar caja de contenido en Drupal

Una vez hecho esto, ya podríamos añadir varias opciones, pero aún así, si ponemos más opciones de lo que es el ancho, aparecerían debajo (en una segunda línea) y no las veríamos.

Image
Ampliar caja de contenido en Drupal

Tendremos que ponerle a la caja un alto máximo, por ejemplo, de 84px (ya que la caja tiene una altura de 42px y queremos que por lo menos se visualicen dos líneas).

Image
Ampliar caja de contenido en Drupal
Image
Ampliar caja de contenido en Drupal

Después, tenemos que pensar en la posibilidad de que, si hubiera muchas opciones y se sobrepasan esas dos líneas, podamos hacer scroll y ver todo.

Podríamos poner la caja con un alto más grande, pero si el usuario añadiera muchas opciones la caja sería infinita y no nos interesa.

Para ello, colocamos a la caja la propiedad overflow: auto y con esto conseguimos que lo que haya a partir de 84px de altura, aparezca en scroll hacia abajo.

Image
Ampliar caja de contenido en Drupal
Image
Ampliar caja de contenido en Drupal

Con esto conseguimos visualizar tantas opciones como se añadan a nuestro campo.

Y de esta manera podemos ampliar caja de contenido en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Image
Herramientas para desarrollar
Herramientas para desarrollar Front Drupal

Herramientas para desarrollar Front Drupal. Esta es una lista de herramientas que todo desarrollador web necesita, tanto si desarrolla con Drupal como si lo hace con otras tecnologías.

Es muy probable que vayamos a requerir imágenes de prueba para nuestro proyecto, que utilizaremos hasta que el cliente nos entregue las definitivas (y esto es algo que algunas veces se puede demorar bastante).

Image
Herramientas para desarrollar Front Drupal

Para ello podemos hacer uso de herramientas como https://www.pexels.com que pone a nuestra disposición una enorme cantidad de imágenes que podemos filtrar por texto o categoría y así encontrar la que más se ajuste a nuestras necesidades. En caso de no querer imágenes con una temática concreta podemos optar por https://dummyimage.com que nos permite generar imágenes con tamaño, texto, color de fondo y color de texto a elegir.

Image
Herramientas para desarrollar Front Drupal

Además de imágenes también podríamos necesitar texto de ejemplo, puesto que es casi seguro que no tendremos los definitivos hasta que tengamos muy avanzado nuestro proyecto, para esto tenemos https://www.lipsum.com , un generador automático de texto en latín que nos creará párrafos y párrafos de texto a necesidad.

Image
Herramientas para desarrollar Front Drupal

Otras herramientas que también nos pueden ser útiles, al menos si somos de front, son aquellas que nos permiten generar y hacer pruebas con sombras, bordes y otros elementos, tales como https://www.cssmatic.com, con la que podemos generar CSS de borders, box-shadows y demás elementos acelerándonos y facilitándonos el trabajo al poder modificar pixelajes, anchos, altos y demás sin tener que teclear nada, simplemente arrastrando botones en el editor.

Image
Herramientas para desarrollar Front Drupal
Image
Herramientas para desarrollar Front Drupal

O como http://apps.eky.hk/css-triangle-generator que nos ayuda a crear triángulos de todo tipo y tamaño que podemos colocar en elementos before o after, utilizar de fondo, etc., modificando su ancho, alto, orientación y en general dándonos una amplia variedad de posibilidades.

Image
Herramientas para desarrollar Front Drupal

En último lugar estaría https://cssgradient.io , otra herramienta que nos permite crear gradientes en css (al igual que la herramienta cssmatic arriba mencionada), pudiendo seleccionar los colores a mezclar, además del punto de fusión del gradiente. Nos permite también subir imágenes, cogiendo los colores de las mismas y así ayudarnos a encontrar el color que más se adapte a nuestro proyecto. La razón de incluirla en esta lista es que la interfaz es más bonita. amigable e intuitiva que la anterior.

Image
Herramientas para desarrollar Front Drupal

Y esto ha sido herramientas que todo desarrollador Front (drupal o no) necesita, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.