Organize buttons within List Group Item

Question

Organize buttons within List Group Item

Navigation

#1 by (3 votes)

3

I want to make a kind of "To Do List" with delete and edit buttons but every time I add a new element, these buttons are badly organized, they are left as follows

How can I get the buttons to be well centered within the cadfa element of the list?

Insertion Code

$(".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('');
    }
});

Thank you.

EDITED

Adding row to the list group, it stays that way

html lista

asked by Baker1562 06.04.2018 в 20:18

source

1 answer

Redirect from Login in html Why does not String.Format work in a subtraction of textbox?

score 3 · Accepted Answer

If you need a row two columns within the list-group-item you can use flex-box , the parent is added the class d-flex and the one you want to align right 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>

For Bootstrap3 you only need to add the row class to the container in this case to list-group-item , that is% <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>