Problème z-index, avec bootstrap select
TBMaster59
Bonjour,
Voila je rencontre un petit problème avec mon code.
Mon dropdown de bootstrap select passe en dessous de mes divs, pourquoi?
Voici le code source de ma page :
<!DOCTYPE html>
<html>
<head>
<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="language" content="fr">
<meta name="copyright" content="Galaxy's">
<meta name="author" content="TBMaster59">
<meta name="theme-color" content="#111111">
<meta name="description" content="Galaxy's est un serveur Skyblock | Créative | Mini-jeux | et encore plein d'autre, venez découvrire tout ces merveille mysterieuse.">
<meta name="keywords" content="Skyblock, Minecraft, Créative, Créatif, Mini-jeux, 1.12, play.galaxys.fr, Galaxy's, Serveur">
<meta name="robots" content="noindex, nofollow">
<!-- TITLE -->
<title>Galaxy's | Administration | Gestion des rôles</title>
<!-- ICONS -->
<link rel="icon" href="/app/bin/pics/logo.ico">
<link rel="icon" type="image/png" href="/app/bin/pics/logo.png" />
<!--- CSS -->
<!-- GOOGLE FONT -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- FONTAWESOME -->
<link rel="stylesheet" type="text/css" href="/vendor/fontawesome-5.4.2/css/all.min.css">
<!-- BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="/vendor/bootstrap-4.1.3/css/bootstrap.min.css">
<!-- GALAXY'S CSS -->
<link rel="stylesheet" type="text/css" href="/app/bin/css/app.css">
<!-- ADDITIONAL CSS -->
<link rel="stylesheet" media="screen" type="text/css" href="/vendor/colorpicker/css/colorpicker.css" />
<link rel="stylesheet" href="/vendor/multiple-select/multi-select.css" />
<!-- JAVASCRIPT -->
<!-- JQUERY -->
<script type="text/javascript" src="/vendor/jquery-3.3.1/jquery.min.js"></script>
<!-- POPPER.JS -->
<script type="text/javascript" src="/vendor/popper.js/popper.min.js"></script>
<!-- BOOTSTRAP -->
<script type="text/javascript" src="/vendor/bootstrap-4.1.3/js/bootstrap.min.js"></script>
<!-- GALAXY'S JAVASCRIPT -->
<script type="text/javascript" src="/app/bin/js/app.js"></script>
<!-- ADDITIONAL SCRIPT -->
<script type="text/javascript" src="/vendor/colorpicker/js/colorpicker.js"></script>
<script src="/vendor/multiple-select/multi-select.js"></script>
</head>
<body>
<div class="container">
<div class="row py-5">
<div class="col-12 col-sm-12 col-md-3">
<div class="list-group">
<a href="http://galaxys.local" class="list-group-item list-group-item-action bg_default"><i class="fas fa-chevron-left"></i> Retour site</a>
</div>
<div class="list-group mt-3">
<a href="/admin/dashboard/" class="list-group-item list-group-item-action bg_default">Tableau de bord</a>
<a href="/admin/ranks/" class="list-group-item list-group-item-action bg_default">Gestion des rôles</a>
</div> </div>
<div class="col-12 col-sm-12 col-md-9 mt-5 mt-sm-5 mt-md-0">
<div class="bg_default p-3 rounded">
<h1>Gestion des rôles</h1>
</div>
<div class="bg_default p-3 rounded mt-3" style="z-index:999;">
<h2>Ajouter un rôle</h2>
<form method="POST">
<div class="form-group">
<label>Nom du rôle</label>
<input id="role_name" type="text" name="role_name" class="form-control" maxlength="50" required>
</div>
<div class="bg_dark p-3 rounded form-group" id="preview_contenaire" style="display:none;">
<label>Prévisualisation:</label>
<h2 id="preview" style="color:#ffffff;"></h2>
</div>
<div class="form-group">
<label>Couleur</label>
<input id="colorpicker" type="text" name="role_color" class="form-control" required>
</div>
<div class="form-group">
<label>Permissions</label>
<select class="w-100" id="permissions" name="role_permissions[]" multiple="multiple">
<optgroup label="Membre">
<option value="3"> Changer la couleur de son pseudo</option>
<option value="4"> Changer la couleur du pseudo des autres</option>
</optgroup>
<optgroup label="Administration">
<option value="2"> Bouton d'accès à la page d'administration visible dans le menu</option>
<option value="1"> Accès à la page d'administration</option>
<option value="5"> Ajouter un rôle</option>
<option value="6"> Supprimer un rôle</option>
<option value="7"> Éditer un rôle</option>
</optgroup>
</select>
</div>
<div class="text-right">
<button class="btn btn-success" name="submit_role">Ajouter</button>
</div>
</form>
</div>
<div class="bg_default p-3 rounded mt-3">
<h2>Liste des rôles</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="fbegebbeehfhi-tab" data-toggle="tab" href="#fbegebbeehfhi-rank" role="tab" aria-controls="fbegebbeehfhi" aria-selected="true">
Administrateur </a>
</li>
<li class="nav-item">
<a class="nav-link" id="fbegedfcbbfe-tab" data-toggle="tab" href="#fbegedfcbbfe-rank" role="tab" aria-controls="fbegedfcbbfe" aria-selected="false">
Membre </a>
</li>
<li class="nav-item">
<a class="nav-link" id="fbehabcbebai-tab" data-toggle="tab" href="#fbehabcbebai-rank" role="tab" aria-controls="fbehabcbebai" aria-selected="false">
Builder </a>
</li>
<li class="nav-item">
<a class="nav-link" id="fbehacafafha-tab" data-toggle="tab" href="#fbehacafafha-rank" role="tab" aria-controls="fbehacafafha" aria-selected="false">
Membre Étoile </a>
</li>
<li class="nav-item">
<a class="nav-link" id="fbehaccieehaf-tab" data-toggle="tab" href="#fbehaccieehaf-rank" role="tab" aria-controls="fbehaccieehaf" aria-selected="false">
Modérateur </a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane p-3 fade show active" id="fbegebbeehfhi-rank" role="tabpanel" aria-labelledby="fbegebbeehfhi-tab">
<form method="POST">
<div class="form-group">
<label>Nom du rôle</label>
<input id="role_name_fbegebbeehfhi" type="text" name="role_name" class="form-control" maxlength="50" value="Administrateur" required>
</div>
<div class="bg_dark p-3 rounded form-group" id="preview_contenaire_fbegebbeehfhi">
<label>Prévisualisation:</label>
<h2 id="preview_fbegebbeehfhi" style="color:#c73b3b;">Administrateur</h2>
</div>
<div class="form-group">
<label>Couleur</label>
<input value="#c73b3b" id="colorpicker_fbegebbeehfhi" type="text" name="role_color" class="form-control" required>
</div>
<div class="form-group">
<label>Permissions</label>
<select class="selectpicker w-100" name="role_permissions[]" multiple="multiple">
<optgroup label="Membre">
<option value="3" selected> Changer la couleur de son pseudo</option>
<option value="4" selected> Changer la couleur du pseudo des autres</option>
</optgroup>
<optgroup label="Administration">
<option value="2" selected> Bouton d'accès à la page d'administration visible dans le menu</option>
<option value="1" selected> Accès à la page d'administration</option>
<option value="5" selected> Ajouter un rôle</option>
<option value="6" selected> Supprimer un rôle</option>
<option value="7" selected> Éditer un rôle</option>
</optgroup>
</select>
</div>
<div class="text-right form-group">
<input type="text" name="role_id" value="5be6e1be47578" hidden>
<button class="btn btn-success" name="edit_role">Éditer</button>
</div>
</form>
</div>
<script type="text/javascript">
$('#role_name_fbegebbeehfhi').keyup(function(e) {
$('#preview_fbegebbeehfhi').text($(this).val());
if($(this).val() == '') {
$('#preview_contenaire_fbegebbeehfhi').fadeOut(200);
} else {
$('#preview_contenaire_fbegebbeehfhi').fadeIn(200);
}
});
$('#colorpicker_fbegebbeehfhi').ColorPicker({
color: '#c73b3b',
livePreview: 'true',
onShow: function (colpkr) {
$(colpkr).fadeIn(200);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(200);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorpicker_fbegebbeehfhi').val("#" + hex);
$('#preview_fbegebbeehfhi').text($('#role_name_fbegebbeehfhi').val());
$('#preview_fbegebbeehfhi').css('color', "#" + hex);
}
});
</script>
<div class="tab-pane p-3 fade" id="fbegedfcbbfe-rank" role="tabpanel" aria-labelledby="fbegedfcbbfe-tab">
<form method="POST">
<div class="form-group">
<label>Nom du rôle</label>
<input id="role_name_fbegedfcbbfe" type="text" name="role_name" class="form-control" maxlength="50" value="Membre" required>
</div>
<div class="bg_dark p-3 rounded form-group" id="preview_contenaire_fbegedfcbbfe">
<label>Prévisualisation:</label>
<h2 id="preview_fbegedfcbbfe" style="color:#f5f5f5;">Membre</h2>
</div>
<div class="form-group">
<label>Couleur</label>
<input value="#f5f5f5" id="colorpicker_fbegedfcbbfe" type="text" name="role_color" class="form-control" required>
</div>
<div class="form-group">
<label>Permissions</label>
<select class="selectpicker w-100" name="role_permissions[]" multiple="multiple">
<optgroup label="Membre">
<option value="3" > Changer la couleur de son pseudo</option>
<option value="4" > Changer la couleur du pseudo des autres</option>
</optgroup>
<optgroup label="Administration">
<option value="2" > Bouton d'accès à la page d'administration visible dans le menu</option>
<option value="1" > Accès à la page d'administration</option>
<option value="5" > Ajouter un rôle</option>
<option value="6" > Supprimer un rôle</option>
<option value="7" > Éditer un rôle</option>
</optgroup>
</select>
</div>
<div class="text-right form-group">
<input type="text" name="role_id" value="5be6e3f29bbfe" hidden>
<button class="btn btn-success" name="edit_role">Éditer</button>
</div>
</form>
</div>
<script type="text/javascript">
$('#role_name_fbegedfcbbfe').keyup(function(e) {
$('#preview_fbegedfcbbfe').text($(this).val());
if($(this).val() == '') {
$('#preview_contenaire_fbegedfcbbfe').fadeOut(200);
} else {
$('#preview_contenaire_fbegedfcbbfe').fadeIn(200);
}
});
$('#colorpicker_fbegedfcbbfe').ColorPicker({
color: '#f5f5f5',
livePreview: 'true',
onShow: function (colpkr) {
$(colpkr).fadeIn(200);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(200);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorpicker_fbegedfcbbfe').val("#" + hex);
$('#preview_fbegedfcbbfe').text($('#role_name_fbegedfcbbfe').val());
$('#preview_fbegedfcbbfe').css('color', "#" + hex);
}
});
</script>
<div class="tab-pane p-3 fade" id="fbehabcbebai-rank" role="tabpanel" aria-labelledby="fbehabcbebai-tab">
<form method="POST">
<div class="form-group">
<label>Nom du rôle</label>
<input id="role_name_fbehabcbebai" type="text" name="role_name" class="form-control" maxlength="50" value="Builder" required>
</div>
<div class="bg_dark p-3 rounded form-group" id="preview_contenaire_fbehabcbebai">
<label>Prévisualisation:</label>
<h2 id="preview_fbehabcbebai" style="color:#ff00e1;">Builder</h2>
</div>
<div class="form-group">
<label>Couleur</label>
<input value="#ff00e1" id="colorpicker_fbehabcbebai" type="text" name="role_color" class="form-control" required>
</div>
<div class="form-group">
<label>Permissions</label>
<select class="selectpicker w-100" name="role_permissions[]" multiple="multiple">
<optgroup label="Membre">
<option value="3" > Changer la couleur de son pseudo</option>
<option value="4" > Changer la couleur du pseudo des autres</option>
</optgroup>
<optgroup label="Administration">
<option value="2" > Bouton d'accès à la page d'administration visible dans le menu</option>
<option value="1" > Accès à la page d'administration</option>
<option value="5" > Ajouter un rôle</option>
<option value="6" > Supprimer un rôle</option>
<option value="7" > Éditer un rôle</option>
</optgroup>
</select>
</div>
<div class="text-right form-group">
<input type="text" name="role_id" value="5be709bc14b08" hidden>
<button class="btn btn-success" name="edit_role">Éditer</button>
</div>
</form>
</div>
<script type="text/javascript">
$('#role_name_fbehabcbebai').keyup(function(e) {
$('#preview_fbehabcbebai').text($(this).val());
if($(this).val() == '') {
$('#preview_contenaire_fbehabcbebai').fadeOut(200);
} else {
$('#preview_contenaire_fbehabcbebai').fadeIn(200);
}
});
$('#colorpicker_fbehabcbebai').ColorPicker({
color: '#ff00e1',
livePreview: 'true',
onShow: function (colpkr) {
$(colpkr).fadeIn(200);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(200);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorpicker_fbehabcbebai').val("#" + hex);
$('#preview_fbehabcbebai').text($('#role_name_fbehabcbebai').val());
$('#preview_fbehabcbebai').css('color', "#" + hex);
}
});
</script>
<div class="tab-pane p-3 fade" id="fbehacafafha-rank" role="tabpanel" aria-labelledby="fbehacafafha-tab">
<form method="POST">
<div class="form-group">
<label>Nom du rôle</label>
<input id="role_name_fbehacafafha" type="text" name="role_name" class="form-control" maxlength="50" value="Membre Étoile" required>
</div>
<div class="bg_dark p-3 rounded form-group" id="preview_contenaire_fbehacafafha">
<label>Prévisualisation:</label>
<h2 id="preview_fbehacafafha" style="color:#a38908;">Membre Étoile</h2>
</div>
<div class="form-group">
<label>Couleur</label>
<input value="#a38908" id="colorpicker_fbehacafafha" type="text" name="role_color" class="form-control" required>
</div>
<div class="form-group">
<label>Permissions</label>
<select class="selectpicker w-100" name="role_permissions[]" multiple="multiple">
<optgroup label="Membre">
<option value="3" selected> Changer la couleur de son pseudo</option>
<option value="4" > Changer la couleur du pseudo des autres</option>
</optgroup>
<optgroup label="Administration">
<option value="2" > Bouton d'accès à la page d'administration visible dans le menu</option>
<option value="1" > Accès à la page d'administration</option>
<option value="5" > Ajouter un rôle</option>
<option value="6" > Supprimer un rôle</option>
<option value="7" > Éditer un rôle</option>
</optgroup>
</select>
</div>
<div class="text-right form-group">
<input type="text" name="role_id" value="5be7020f05970" hidden>
<button class="btn btn-success" name="edit_role">Éditer</button>
</div>
</form>
</div>
<script type="text/javascript">
$('#role_name_fbehacafafha').keyup(function(e) {
$('#preview_fbehacafafha').text($(this).val());
if($(this).val() == '') {
$('#preview_contenaire_fbehacafafha').fadeOut(200);
} else {
$('#preview_contenaire_fbehacafafha').fadeIn(200);
}
});
$('#colorpicker_fbehacafafha').ColorPicker({
color: '#a38908',
livePreview: 'true',
onShow: function (colpkr) {
$(colpkr).fadeIn(200);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(200);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorpicker_fbehacafafha').val("#" + hex);
$('#preview_fbehacafafha').text($('#role_name_fbehacafafha').val());
$('#preview_fbehacafafha').css('color', "#" + hex);
}
});
</script>
<div class="tab-pane p-3 fade" id="fbehaccieehaf-rank" role="tabpanel" aria-labelledby="fbehaccieehaf-tab">
<form method="POST">
<div class="form-group">
<label>Nom du rôle</label>
<input id="role_name_fbehaccieehaf" type="text" name="role_name" class="form-control" maxlength="50" value="Modérateur" required>
</div>
<div class="bg_dark p-3 rounded form-group" id="preview_contenaire_fbehaccieehaf">
<label>Prévisualisation:</label>
<h2 id="preview_fbehaccieehaf" style="color:#323fd1;">Modérateur</h2>
</div>
<div class="form-group">
<label>Couleur</label>
<input value="#323fd1" id="colorpicker_fbehaccieehaf" type="text" name="role_color" class="form-control" required>
</div>
<div class="form-group">
<label>Permissions</label>
<select class="selectpicker w-100" name="role_permissions[]" multiple="multiple">
<optgroup label="Membre">
<option value="3" selected> Changer la couleur de son pseudo</option>
<option value="4" selected> Changer la couleur du pseudo des autres</option>
</optgroup>
<optgroup label="Administration">
<option value="2" selected> Bouton d'accès à la page d'administration visible dans le menu</option>
<option value="1" selected> Accès à la page d'administration</option>
<option value="5" > Ajouter un rôle</option>
<option value="6" > Supprimer un rôle</option>
<option value="7" > Éditer un rôle</option>
</optgroup>
</select>
</div>
<div class="text-right form-group">
<input type="text" name="role_id" value="5be70228ee7a5" hidden>
<button class="btn btn-success" name="edit_role">Éditer</button>
</div>
</form>
</div>
<script type="text/javascript">
$('#role_name_fbehaccieehaf').keyup(function(e) {
$('#preview_fbehaccieehaf').text($(this).val());
if($(this).val() == '') {
$('#preview_contenaire_fbehaccieehaf').fadeOut(200);
} else {
$('#preview_contenaire_fbehaccieehaf').fadeIn(200);
}
});
$('#colorpicker_fbehaccieehaf').ColorPicker({
color: '#323fd1',
livePreview: 'true',
onShow: function (colpkr) {
$(colpkr).fadeIn(200);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(200);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorpicker_fbehaccieehaf').val("#" + hex);
$('#preview_fbehaccieehaf').text($('#role_name_fbehaccieehaf').val());
$('#preview_fbehaccieehaf').css('color', "#" + hex);
}
});
</script>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#permissions').selectpicker({
liveSearch: true,
actionsBox: true,
liveSearchNormalize: true,
selectOnTab: true,
noneSelectedText: "Aucune permission selectionnée",
selectAllText: "Tout selectionner",
deselectAllText: "Tout déselectionner",
noneResultsText: "Aucun résultat pour {0}"
});
$('#role_name').keyup(function(e) {
$('#preview').text($(this).val());
if($(this).val() == '') {
$('#preview_contenaire').fadeOut(200);
} else {
$('#preview_contenaire').fadeIn(200);
}
});
$('#colorpicker').ColorPicker({
color: '#ffffff',
livePreview: 'true',
onShow: function (colpkr) {
$(colpkr).fadeIn(200);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(200);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorpicker').val("#" + hex);
$('#preview').text($('#role_name').val());
$('#preview').css('color', "#" + hex);
}
});
});
</script>
</body>
</html>Pouvez-vous m'aider?