0

Tengo una lista de palabras que quiero apilar en columnas con el fin de guardar y utilizar el lugar de la izquierda en un archivo html para un proyecto Django:

enter image description here

Y más bien quiero tener botones como un selector de elementos múltiples:

enter image description here

Que puede encontrar el código allí.

Así que lo intenté:

{% extends "todo/base.html" %}

{% block content %}

   <style>
      .elements {
        display: block;
      }
      .items {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-direction: column;
      }
      .item {
        flex: 1 0 20%;
      }
      .item-check {
        display: none;
      }
      .item-name {
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
      .item .item-check:checked + .item-name {
        background-color: rgba(61, 86, 233, 0.3);
      }
      .item-name:hover {
        background-color:orange;
      }

    </style>

  <!-- Header -->
  <header class="intro-header">
    <div class="container">
      <div class="col-lg-5 mr-auto order-lg-2">
      <h3><br>Tell me something about you... </h3>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <section class="content-section-a">

    <div class="container">
      <dt>
        <span>Pick the keywords you want to express when wearing perfume</span>
      </dt>

    <form action = "/getmatch" method="POST">
      {% for keyword in keywords %}
        <div class="elements">
            <ul class="items">
              <li class="item">
                <label>
                  <input class="item-check" name="keywords[]" type="checkbox" value= {{ keyword.title }} />
                  <div class="item-name">{{ keyword.title }}</div>
                </label>
              </li>
            </ul>
        </div>
      {% endfor %}
      {% csrf_token %}
        <button type="submit">Envoyer</button>
    </form>
    </div>
  </section>

  <!-- Bootstrap core JavaScript -->
  <script src="static/vendor/jquery/jquery.min.js"></script>
  <script src="static/vendor/popper/popper.min.js"></script>
  <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>



{% endblock %}

Y me devuelve:

introducir la descripción de la imagen aquí

3
  • ¿Ya revisaste de que esté bien escrito el par de llaves? Tienes {{keyword.title} y creo que debería ser {{ keyword.title }}
    – Roberto
    Commented el 28 ene. 2021 a las 14:34
  • Sí, tienes razón @Roberto , me salen las palabras, pero no sé dónde poner el css para hacer botones bonitos... Commented el 28 ene. 2021 a las 14:48
  • @RevolucionforMonica yo no termino de comprender la duda ¿puedes explicarla mejor por favor?
    – user128299
    Commented el 28 ene. 2021 a las 20:59

1 respuesta 1

4

[EDIT]: Explicación

He removido las instrucciones CSS que no estaba utilizando y dejé lo que en realidad funciona.

Qué estoy haciendo:


.elements es mi clase contenedor. En tu caso deberías tener una clase que envuelva la lista que vas a renderizar.

ul.items Lo estoy utilizando para darle estílos a mi lista de elementos, lo único que hago es darle una propiedad flex para que coloque cada elemento de la lista uno al lado del otro.

La propiedad flex-wrap: wrap me permite que los elementos, llegado un punto, hagan un salto de línea. (No quiero que los botones queden uno al lado del otro infinitamente, para éste caso solo quiero 4 elementos por línea)

flex: 1 0 20% es para que los elementos, como ya mencioné antes, ocupen un tamaño en específico en la fila. De esta manera, cuando existan 4 elementos van a ocupar el 100% del tamaño total y se hará un salto de línea cuando se agrege otro.

Como hacer para que te pueda funcionar:


Te sugeriría que crees una estructura css parecida a la que te estoy dando. Es decir, un contenedor > una lista > un item. De ésta manera podras replicar el comportamiento.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Documento de prueba</title>
    <style>
      .elements {
        display: block;
      }
      ul.items {
        display: flex;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
        list-style: none;
      }
      li.item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1 0 20%;
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Botones</h1>
    <div class="elements">
      <ul class="items">
        <li class="item">
          <i class="fa fa-home"></i>
          <span>Label</span>
        </li>
        <li class="item">
          <i class="fa fa-home"></i>
          <span>Label</span>
        </li>
        <li class="item">
          <i class="fa fa-home"></i>
          <span>Label</span>
        </li>
        <li class="item">
          <i class="fa fa-home"></i>
          <span>Label</span>
        </li>
        <li class="item">
          <i class="fa fa-home"></i>
          <span>Label</span>
        </li>
        <li class="item">
          <i class="fa fa-home"></i>
          <span>Label</span>
        </li>
        <li class="item">
          <i class="fa fa-home"></i>
          <span>Label</span>
        </li>
        <li class="item">
          <i class="fa fa-home"></i>
          <span>Label</span>
        </li>
      </ul>
    </div>
  </body>
</html>

Acerca de tus clases:

El ejemplo del snippet no le va muy bien con el responsive, así que tratare de replicar un ejemplo con alguna de las clases que tu utilizas. Sin embargo, la estructura que te sugiero es básicamente la misma

Nota: Utilizaré las mismas clases CSS del Snippet de arriba, sin embargo para fines de emular tu código voy a modificar un par de cosas.

De ésto:

  <style>
      .elements {
        display: block;
      }
      ul.items {
        display: flex;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
        list-style: none;
      }
      li.item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1 0 20%;
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
     
  </style>

Vamos a poner ésto:


   <style>
      .elements {
        display: block;
      }
      ul.items {
        display: flex;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
        list-style: none;
      }
      li.item {
        flex: 1 0 20%;
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
      .col {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    </style>

LUEGO, tu HTML quedaría parecído así:

   <ul class="items ">
       <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
         <div data-toogle="buttons" class="col">
            <i class="fa fa-home"></i> 
            <span>{{ keyword.title }}</span>
         </div>
       </li>
   </ul>

9
  • Muchas gracias por tu ayuda Roberto, sin embargo sigo sin conseguir el mismo efecto que tú, incluso cambiando los selectores css. He actualizado mi pregunta con mi intento. Commented el 28 ene. 2021 a las 18:30
  • 1
    He modificado la solución. Espero que te de idea de como deberías estructurar tu código para la solución. Como lo estabas haciendo no estaba funcionando porque colocabas los selectores donde no iban.
    – Roberto
    Commented el 28 ene. 2021 a las 19:59
  • Muchas gracias! Es realmente súper claro, ¡eres un maestro! Intenté replicar el tuo ejemplo con alguna de las clases que utilizo. Sin embargo no estoy capaz de obtener que los botones queden uno al lado del otro mientras que tengo: ul.items { ... flex-wrap: wrap; ...} y me queda con los <ul class="items "> ... Actualicé la mia pregunta. Commented el 29 ene. 2021 a las 16:03
  • Recuerda que el secreto para que queden uno al lado del otro, es que el padre sea de tipo flex. Sin embargo, cuando usas las classes de bootstrap col-xs-6 col-sm-3 y esas, segun yo recuerdo tenías que meterlas dentro de una clase llamada row. Algo como `<div class="row"> <div class="col-xs-3 ...."></div> </div>. Intenta hacerlo de esta manera y me comentas como te va. Saludos
    – Roberto
    Commented el 29 ene. 2021 a las 16:27
  • 1
    Creo saber que sucede, según veo en tu intento. Debes iterar son los elementos dentro del UL, actualmente estás iterando el UL completo. Mueve ese bloque for loop y sitúalo dentro de la etiqueta UL, de manera que lo que se repitan los LI. Ese fue el error que estabas cometiendo, no es problema del CSS como tal. Revisa y me cuentas
    – Roberto
    Commented el 2 feb. 2021 a las 18:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.