Bootstrap CSS aligner l'alerte au champ de saisie

Question

J'essaie d'aligner mes alertes pour faire apparaître mon champ de saisie. J'appelle l'alerte via un appel ajax.

function bulkConfirm(text) { 
var response = ''; 
$.ajax({ type: "GET", 
     url: ("https://"+environment+"/nb/"+user+"/confirm/"+text), 
headers: { 'Authorization': authorization}, 
    async: true, 
    success : function(data) 
    { 
     $('#alert_placeholder').html("<div class='alert alert-success alert-dismissable fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><span class='glyphicon glyphicon-ok' aria-hidden='true' style='padding-right:5px;'></span><strong>'Success!'</strong>"+data+"</div>"); 
    skipUpdate = 1; 
    updateScans(); 
    } 
}); 
} 

Answer 1

Afin de résoudre votre problème, vous pouvez définir classe padding-left-0 pour alerte:

.alert { 
    padding-left: 0px !important; 
} 

Si au contraire vous souhaitez aligner le alert_placeholder sur la droite de la boîte d'entrée vous pouvez utiliser les styles suivants:

.alert { 
    padding: 5px !important; 
} 
#alert_placeholder { 
    display: inline-block; 
} 

L'exemple:

// 
 
// simulation of ajax call.... 
 
// 
 
var data = "....."; 
 
$('#alert_placeholder').html("<div class='alert alert-success alert-dismissable fade in'>" + 
 
     "<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>" + 
 
     "<span class='glyphicon glyphicon-ok' aria-hidden='true' style='padding-right:5px;'>" + 
 
     "</span><strong>'Success!'</strong>"+data+"</div>"); 
 
     
 
     
 
$('#alert_placeholder1').html("<div class='alert1 alert alert-success alert-dismissable fade in'>" + 
 
     "<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>" + 
 
     "<span class='glyphicon glyphicon-ok' aria-hidden='true' style='padding-right:5px;'>" + 
 
     "</span><strong>'Success!'</strong>"+data+"</div>");

.alert { 
 
    padding-left: 0px !important; 
 
} 
 

 

 
.alert1 { 
 
    padding: 5px !important; 
 
} 
 
#alert_placeholder1 { 
 
    display: inline-block; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <input type="text" id="barcode" autocomplete="off"/><div id="alert_placeholder"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <input type="text" id="barcode" autocomplete="off"/><div id="alert_placeholder1"></div> 
 
</div>