3

Quiero hacer una especie de "To Do List" con botones de borrar y editar pero cada vez que añado un nuevo elemento, estos botones quedan mal organizados, quedan de la siguiente forma

introducir la descripción de la imagen aquí

Como puedo lograr que los botones queden bien centrados dentro de cadfa elemento de la lista?

Codigo de Insercion

$(".agregarCate").click(function () {

    if ($("#custom_textbox").val() != "") {
        var deleteButton = "<button class='delete btn btn-warning'>Borrar</button>";
        var editButton = "<button class='edit btn btn-success'>Editar</button>";
        var twoButtons = "<div class='btn-group pull-right'>" + deleteButton + editButton + "</div>";
        $(".list_of_items").append("<li class='list-group-item'>" + "<div class='text_holder'>" + $("#custom_textbox").val() + twoButtons + "</div></li>");
        $("#custom_textbox").val('');
    }
});

Gracias.

EDITADO

Añadiendo rowal list group, queda asi introducir la descripción de la imagen aquí

1 respuesta 1

3

Si necesita una fila dos columnas dentro del list-group-item puede utilizar flex-box , al padre se le añade la clase d-flex y al que desea alinear a la derecha ml-auto (Bootstrap4)

$(".agregarCate").click(function () {

var deleteButton = "<button class='delete btn btn-warning'>Borrar</button>";
var editButton = "<button class='edit btn btn-success'>Editar</button>";
var twoButtons = "<div class='btn-group ml-auto'>" + deleteButton + editButton + "</div>";
$(".list_of_items").append("<li class='list-group-item'> <div class='text_holder d-flex '>" + $("#custom_textbox").val() + twoButtons + "</div></li>");
$("#custom_textbox").val('');


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
<button class="agregarCate btn btn-info">Agregar</button>
<div class="list_of_items">
	
</div>

Para Bootstrap3 solo haría falta añadir la clase row al contenedor en este caso a list-group-item , es decir <li class='list-group-item row'>

$(".agregarCate").click(function () {

var deleteButton = "<button class='delete btn btn-warning'>Borrar</button>";
var editButton = "<button class='edit btn btn-success'>Editar</button>";
var twoButtons = "<div class='btn-group pull-right'> " + deleteButton + editButton + "</div>";
$(".list_of_items").append("<li class='list-group-item row'> <div class='text_holder'>" + $("#custom_textbox").val() + twoButtons + "</div></li>");
$("#custom_textbox").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button class="agregarCate btn btn-info">Agregar</button>
<div class="list_of_items">
	
</div>

3
  • El problema con añadirle row es que la lista se corre y queda desalineada con los elementos del boton y text, lo resolvi añadiendo <br/>despues de los botones, igual excelente respuesta como siempre.
    – Baker1562
    el 6 abr. 2018 a las 18:58
  • bootstrap 4, añado una imagen el post de como queda añadiendole row
    – Baker1562
    el 6 abr. 2018 a las 19:26
  • 1
    @Baker1562 tener en cuenta que no añado row para bootstrap4 , solo para bootstrap3. Saludos.
    – Dev. Joel
    el 6 abr. 2018 a las 19:45

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.