Newline on pull-right (Bootstrap)

Question

I'm trying to make a to do-list using Bootstrap and Javascript, and every item on the list consists of a text which is user-input and three clickable glyphicons (edit, finished, remove), on which i use .pull-right to make them appear on the right of the list-item.

This works well when adding a new element altogether, but I also want to make the elements editable, and upon saving an edit the glyphicons all of a sudden appear one line below the text (and outside of the box that is the list-item for that matter).

http://jsfiddle.net/k3uLutbb/

In short, my question is: How do i get the text and the glyphicons to stay horizontally aligned when saving an edit?

$("#addText").on("click", function() {
var inText = $("#inText").val();
if(inText !== "") {
  $("#inText").val("");
  var theText = "<li class='list-group-item'>"+inText+"<span class='glyphicon glyphicon-remove pull-right' aria-hidden='true'></span><div class='glyphicon glyphicon-ok pull-right' id='1' aria-hidden='true'></div><span class='glyphicon glyphicon-pencil pull-right' aria-hidden='true'></span></li>";
  $(".list-group").append($(theText));
}

^ This is for adding a new list-item, alignment works fine.

$("ul").on("click", "#updateText", function() {
var inText = $("#newText").val());
console.log("hihi");
if(inText !== "") {
  var theText = inText+"<span class='glyphicon glyphicon-remove pull-right' aria-hidden='true'></span><span class='glyphicon glyphicon-ok pull-right' aria-hidden='true'></span><span class='glyphicon glyphicon-pencil pull-right' aria-hidden='true'></span>";
  $(this).closest("li").html(theText);
}

^ This is for saving an edit, it's here the alignment gets all messed up even though I've copied the html from the other function.

I've also tried using float: right; instead of .pull-right, but to no avail.

score 0 · Accepted Answer · edited May 23 '17 at 11:44

Of course I should have searched for "float: right/float: left" as well, as I found the answer there. I just swapped so that the code looks like this:

var theText = "<span class='glyphicon glyphicon-remove pull-right' aria-   hidden='true'></span><span class='glyphicon glyphicon-ok pull-right' aria-hidden='true'></span><span class='glyphicon glyphicon-pencil pull-right' aria-hidden='true'></span>"+inText;
  $(this).closest("li").html(theText);

i.e. the "inText" variable after the spans instead of before.

float: right in IE7 dropping to a new line

Newline on pull-right (Bootstrap)

1 Answers1