0

Quiero que en mi post_card aparezca un botón desplegable que tenga esta forma:

introducir la descripción de la imagen aquí

Y que al apretar me salga la opción de eliminar o editar ese post.

Dejo el código del HTML post_card.html:

{% load static %}
<div class="col-sm-12 col-md-8 offset-md-2 mt-5 p-0 shadow p-3 mb-5 bg-white rounded post-container">

    <a href="{% url 'posts:detail' post.pk %}">
        <img style="width: 100%;" src="{{ post.photo.url }}" >
    </a>

    <p class="ml-2 mt-0 mb-2">
        <b>{{ post.title }}</b> - <small>{{ post.created }}</small>
    </p>

    <p>
        <p>{{ post.description }}</p>
    </p>
</div>

2 respuestas 2

2

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />







<div class="dropdown">
  <button class="btn btn-success" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fas fa-ellipsis-v"></i>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

En bootstrap eso lo consigues con un dropdown. Ten en cuenta que los 3 puntos verticales usados en este ejemplo son de fontawesome, tendrás que añadir ese css. O cambiar '' por otra cosa.

<div class="dropdown">
  <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fas fa-ellipsis-v"></i>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
1

Ejemplo de cómo crear un botón de 3 puntos con CSS (sin funcionalidad):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Boton 3 puntos</title>

    <style type="text/css">
        * {
            box-sizing : border-box;
            margin     : 0;
            padding    : 0;
            text-align : center;
        }

        .btn {
            background    : lightgrey;
            border-radius : 3px;
            border        : 1px solid darkgrey;
            color         : grey;
            display       : inline-block;
            font-size     : 1.5rem;
            padding       : .8rem;
        }
        .btn:hover {
            cursor: pointer;
        }
        .custom-btn {
            font-family : monospace;
            margin      : 1rem;
            padding-top : .3rem;
        }
        .vertical {
            transform: rotate(-90deg);
        }
    </style>
</head>
<body>
    
    <div class="btn custom-btn">
        ...
    </div>

    <br>

    <div class="btn custom-btn vertical">
        ...
    </div>
</body>
</html>

Si estas usando Bootstrap solo necesitas las clases CSS: custom-btn y vertical, la clave para disponer los puntos en vertical esta la última, la primera es para otros ajustes de la apariencia del botón.

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.