Ho un modo molto semplice per fare una pagina in cui posso inserire i membri e li rimuove o li contrassegna come fatto. I membri sono Bootstrap avvisi, finora tutto bene.
Il mio problema è, che l'avviso/i membri sono troppo di larghezza e deve essere in due o tre colonne, per essere in grado di visualizzare più di loro sullo schermo.
Questo è dove ho bloccato, perché il sistema di griglia non la vuole. Non so che cosa mi manca...
Per favore qualcuno può aiutarmi, come riorganizzare l'elenco dei membri in due o tre colonne?
Ho provato con le colonne con il team1 il pulsante.
Questo è il JSFiddle URL: https://jsfiddle.net/voriand/zsfo65wb/
$(document).ready(function() {
$('.btn-addmember').click(function() {
if ($('#text').val().length != 0) {
var x = $('#memberlist').html();
var y =
`<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
` + $('#text').val() + `</div>`;
$('#memberlist').html(y + x);
$('#text').val("");
} else alert("Please, enter the name of the member");
});
//Adding members of team1
$('.btn-team1').click(function() {
if ($('#team1').val().length != 0) {
var members = $('#team1').val().split('\n');
for (var i = 0; i < members.length; i++) {
var x = $('#memberlist').html();
var y =
`<div class="col-sm"><div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<b>` + members[i] + `</b></div></div>`;
if (members[i].trim().length > 0) {
$('#memberlist').html(y + x);
}
}
}
});
//Adding members of team2
$('.btn-team2').click(function() {
if ($('#team2').val().length != 0) {
var members = $('#team2').val().split('\n');
for (var i = 0; i < members.length; i++) {
var x = $('.container').html();
var y =
`<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<b>` + members[i] + `</b></div>`;
if (members[i].trim().length > 0) {
$('.container').html(y + x);
}
}
}
});
// When Member is clicked
$(document).on('click', '.alert', function() {
if ($(this).css('text-decoration-line') == "none") {
$(this).css('text-decoration-line', 'line-through');
$(this).css('background-color', '#dddddd');
$(this).css('border-color', '#dddddd');
} else {
$(this).css('text-decoration-line', 'none');
$(this).css('background-color', '#dff0d8');
$(this).css('border-color', '#d6e9c6');
}
});
});.container {
width: 80%;
height: auto;
}
.foot {
position: fixed;
left: 10%;
bottom: 0;
width: 80%;
text-align: center;
}
.form-group {
height: 0px;
visibility: hidden;
}
.copyright {
width: 100%;
text-align: right;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<center>
<div class="foot">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10">
<!-- Input for members -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Add member" id="text">
<div class="input-group-btn">
<button class="btn btn-success btn-addmember">
<i class="glyphicon glyphicon-plus">
</i></button>
</div>
<div class="input-group-btn">
<button class="btn btn-success btn-team1">
<i class="glyphicon glyphicon-plus">
</i> TEAM1</button>
</div>
<div class="input-group-btn">
<button class="btn btn-success btn-team2">
<i class="glyphicon glyphicon-plus">
</i> TEAM2</button>
</div>
</div>
<br>
<br>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Team1</label>
<textarea class="form-control" id="team1" rows="3">
vivamus eget
lacus vitae
mi vulputate
varius integer
suscipit orci
condimentum
vestibulum
</textarea>
<label for="exampleFormControlTextarea1">Team2</label>
<textarea class="form-control" id="team2" rows="3">
vivamus eget
lacus vitae
mi vulputate
varius integer
suscipit orci
condimentum
vestibulum
</textarea>
</div>
<p class="copyright">Created by: Me - <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<br>
<h2 class="text text-success">Team Members</h2>
<br>
<div class="container-fluid">
<div id="memberlist" class="row">
</div>
</div>
</center>