We Keep Coding

Why is my modal not displaying as a popup that fades from the top and centred?

I am attempting to make a portfolio image gallery that display's a model with a click that fades in and is positioned to the center.
The Button Does not properly load the modal popup.
I have tried proper linking from bootstrap and jquery files, I have also attempted to check if CSS properties are conflicting, and still, nothing works?
I don't understand if it's where I placed the modal fade or if it has to do with mixing a modal popup with a category filter menu.
I have attempted to search online everywhere but cannot seem to find any other issues with this.
Thank you for your help.
$(document).ready(function () {
$('.list').click(function () {
const value =
$(this).attr('data-filter'); if (value == 'all') { $('itemBox').show('1000'); }
else {
$('.itemBox').not('.' + value).hide('1000');
$('.itemBox').filter('.' + value).show('1000');
}
}) $('.list').click(function () {
$(this).addClass('active').siblings().removeClass('active');
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
section {
padding: 20px;
width: 1280px;
margin: 40px auto;
}
section ul {
display: flex;
margin-bottom: 10px;
;
}
section ul li {
list-style: none;
background: #eee;
padding: 8px 20px;
margin: 5px;
letter-spacing: 1px;
cursor: pointer;
}
section ul li.active {
background: #03a9f4;
color: #fff;
}
.product {
display: flex;
flex-wrap: wrap;
}
.product .itemBox {
position: relative;
width: 200px;
height: 300px;
margin: 5px;
}
.product .itemBox img {}
#position {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section>
<ul>
<li class="list active" data-filter="all">All</li>
<li class="list" data-filter="mobile">Mobile</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
<li class="list" data-filter="shoe">Shoe</li>
<li class="list" data-filter="headphone">Headphone</li>
</ul>
<div class="product">
<div class="card">
<div class="card-body">
<div class="itemBox mobile"><img src="img/colorgame.jpg" />
<h5 class="card-title">Card Title</h5>
<p class="card-text">Quick TExt Example</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="img/colorgame.jpg" />
<p>Example Paragraph text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="itemBox camera"><img src="img/colorgame.jpg"></div>
<div class="itemBox watch"><img src="img/colorgame.jpg"></div>
<div class="itemBox shoe"><img src="img/colorgame.jpg"></div>
<div class="itemBox headphone"><img src="img/colorgame.jpg"></div>
</div>
</section>

position : fixed in Materialize css modal not working

I want the header of the Modal to be fixed as the modal is scrolled, but position:fixed; is not working. I am using Materialize CSS for the modal construction. But position:sticky is working.
$(document).ready(()=>{
$('#missionModal').modal();
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="">
<div style="position:fixed;width: 100%;top:0px;left:0px;height:100px;background-color:#0a2701">
</div>
<div style="margin-top:100px;height:550px">
<p>This ois naven don</p>
</div>
</div>
<div style="position: absolute;width: 100%;bottom:0px;left:0px;" class="modal-footer">
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>

Maybe try this one. I reconstructed your HTML and CSS code:
Just identify which is your header and give a fixed height on your modal body to be scrollable. And, materialize css has a default overflow-y: auto I just give it initial so that the whole modal will be not scrollable.
Please take a look at my code:
$(document).ready(()=>{
$('#missionModal').modal();
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.modal {
overflow: initial !important;
}
.modal-header {
height: 100px;
background: #0a2701;
font-size: 40px;
padding: 20px;
color: #ffffff;
}
.modal-body {
overflow-y: auto;
height: 120px;
background: #fff;
}
.modal-body div {
height:550px
}
.modal-close {
float: right;
display: inline-block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="modal-header">This is a header.</div>
<div class="modal-body">
<div>
<p>This ois naven don</p>
</div>
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>

Bootstrap modal didn't display fix

I'm working on a PHP admin management page with CRUD. In this page we want to add a vehicle and to edit data which is present in a SQL record table by using a modal box which contains a form to insert and update data. But I have a problem:
The modal box didn't display. But I've tried to substitute it with a pure HTML and CSS modal box that works.
The pure modal box works perfectly, but in the edit column of the table only the first row can display an edit modal all, the other row didn't show a modal.
Complete page code:
<?php
require_once '../inc/function.php';
adac();
require_once '../inc/db.php';
if(!empty($_POST)){
$requ = $pdo->prepare('INSERT INTO `vehicules`(`marques`, `modele`, `annee`, `proprio`, `imma`) VALUES (?, ?, ?, ?, ?)');
$rl= $requ->execute([$_POST['mq'], $_POST['ml'], $_POST['an'], $_POST['pro'], $_POST['im']]);
if($rl){
$_SESSION['flash']['success'] = "Informations enregistrées!";
}else{
$_SESSION['flash']['danger'] = "Echec!";
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<script src="../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>LeLoux</title>
<link rel="stylesheet" href="../bootstrap-4.3.1-dist\css\bootstrap.min.css">
<style>
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
}
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.o{
margin: 10px; }
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: light;
text-align: center;
}
.lk{
width: 135px;
height: 40px;
border: 1.6px solid grey;
border-radius: 5px;
margin: 10px;
display: inline-block;
}
.po{
width: 34px;
height: 34px;
background: transparent;
float: left;
margin: 1px;
cursor: pointer;
}
.poa{
text-align: center;
margin: 5px;
text-decoration: none;
}
.nav-item{
width: 17%;
text-align: center;
margin:5px;
}
.bob{
width: 720px;
}
.mo{
margin: 5px;
border: 1px solid transparent;
width: 1100px;
height: auto;
}
.fo{
display: inline-block;
}
a {
text-decoration: none;
color: black;
}
a:hover{
color: grey;
}
.co{
max-height:860px;
height:460px;/*pour IE qui comprend rien, et qui ne reconnait pas min-height, mais qui comprend mal height*/
max-width:1100px;
width:980px;/*pour IE qui comprend rien*/
overflow:auto;/*pour activer les scrollbarres*/
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
}
/* The Close Button */
.close {
color: #fefefe;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.modal-header{
background-color: #5e5e90;
color: #fff;
margin-top: -20%;
width: 110%;
height: 15%;
padding: 16px;
margin-left: -19px;
}
.btnq{
background-color: #5e5e90;
color: #fff;
}
.btnp{
background-color:#fff;
color:#5e5e90;
border: 2px solid #5e5e90;
font-weight: bolder;
}
.nu{
text-transform: uppercase;
}
</style>
</head>
<body class="bg-light">
<!--################## add modal ###############################-->
<!-- Modal -->
<div class="modal fade" id="eModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ajouter un vehicule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<table cellspacing="3"cellpadding ="6">
<tr>
<td><b>Marque</b><br>
<input type="text" class="form-control nu" value="" name="mq" id="mq">
</td>
<td><b>Modèle</b><br>
<input type="text" class="form-control" name="ml" id="ml">
</td>
</tr>
<tr>
<td><b>Année</b><br>
<input type="text" class="form-control" name="an" id="an">
</td>
<td><b>Transmission</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
<tr>
<td>
<b>N de chassis</b><br>
<input type="text" class="form-control" id="">
</td>
<td>
<b>Immatriculation</b><br>
<input type="text" class="form-control" name="im" id="im">
</td>
</tr>
<tr>
<td><b>Carburant</b><br>
<input type="text" class="form-control" id="">
</td>
<td><b>Couleur</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
<tr>
<td>
<b>Propriétaire</b><br>
<input type="text" class="form-control" name="pro" id="pro" >
</td>
<td>
<b>Contact</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="reset" class="btn btnp" data-dismiss="modal">Annuler</button>
<button type="submit" class="btn btnq">Enregistrer</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--################## edit modal ###############################-->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modifier un vehicule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<table cellspacing="3"cellpadding ="6">
<tr>
<td><b>Marque</b><br>
<input type="text" class="form-control nu" value="" name="mq" id="mq">
</td>
<td><b>Modèle</b><br>
<input type="text" class="form-control" name="ml" id="ml">
</td>
</tr>
<tr>
<td><b>Année</b><br>
<input type="text" class="form-control" name="an" id="an">
</td>
<td><b>Transmission</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
<tr>
<td>
<b>N de chassis</b><br>
<input type="text" class="form-control" id="">
</td>
<td>
<b>Immatriculation</b><br>
<input type="text" class="form-control" name="im" id="im">
</td>
</tr>
<tr>
<td><b>Carburant</b><br>
<input type="text" class="form-control" id="">
</td>
<td><b>Couleur</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
<tr>
<td>
<b>Propriétaire</b><br>
<input type="text" class="form-control" name="pro" id="pro" >
</td>
<td>
<b>Contact</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="reset" class="btn btnp" data-dismiss="modal">Annuler</button>
<button type="submit" class="btn btnq">Enregistrer</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="o"><h3 class="font-weight-bolder">LeLoux</h3> </div>
<div class="container bob">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item shadow-sm">
<a class="nav-link active" data-toggle="tab" href="advehi.php">Vehicules</a>
</li>
<li class="nav-item shadow-sm">
<a class="nav-link" data-toggle="tab" href="adrepa.php">Reparateurs</a>
</li>
<li class="nav-item shadow-sm">
<a class="nav-link" data-toggle="tab" href="adinter.php">Interventions</a>
</li>
<li class="nav-item shadow-sm">
<a class="nav-link" data-toggle="tab" href="adfor.php">Forfaits</a>
</li>
<li class="nav-item shadow-sm">
<a class="nav-link" data-toggle="tab" href="adfac.php">Facturations</a>
</li>
</ul>
</div>
<center><div class="tab-content mo">
<div class="container shadow tab-pane fade show active "><br>
<div class="co">
<table class="table">
<thead>
<tr>
<th scope="col">Marques</th>
<th scope="col">Modèle</th>
<th scope="col">Année</th>
<th scope="col"><div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<b> Propriétaire</b>
</button>
</th>
<th scope="col">Immatriculation</th>
<th scope="col"><div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="../im/settings.png" class="po">
</button>
</th>
</tr>
</thead>
<tbody>
<?php
$req = $pdo->prepare('SELECT DISTINCT * FROM vehicules');
$req->execute();
$user = $req->fetchAll();
foreach ($user as $row) { ?>
<?= "<tr><th scope='row'>".$row['marques']."</th><td>".$row['modele']."</td><td>".$row['annee']."</td><td>".$row['proprio']."</td><td>".$row['imma']."</td><td><img src='../im/pencil.png' class='po' id='nie' data-toggle='modal' data-target='#exampleModal'></td></tr>"; ?>
<?php } ?>
</tbody>
</table>
</div>
</div></center>
<div class="footer">
<!-- Button trigger modal -->
<button type="button" class="lk float-left" data-toggle="modal" data-target="#eModal">
<img src="../im/add.png" class="po"> <p class="poa">Ajouter</p>
</button>
<img src="../im/search.png" class="po"> <p class="poa">Rechercher</p></div>
<div class="lk float-left"><img src="../im/opera.png" class="po"> <p class="poa">Details</p></div>
<div class="lk float-right"><img src="../im/close.png" class="po"> <p class="poa">Fermer</p></div>
</div>
</body>
</html>
pure html css and js modal:
html:
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
css:
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
js:
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

Bootstrap modal is not appearing screen blank

I am new to webDevelopment. Here, I am using a bootstrap modal. In that when I am first time opening that it is opening properly,But When i try to open it for second time the whole screen goes blank and not able to perform any action.
HTML
<div id="documentModal" class="modal fade" role="dialog" aria-labelledby="confirmModal" aria-hidden="true" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog modal-sm documentModal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Documents which are not Processed</h4>
</div>
<div class="modal-body">
<ul class="list-group gazetteer-conatiner">
<li class="list-group-item" ng-repeat="file in files_Failed"
ng-show="file">
<span>{{file}}</span>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="button-size btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
CSS -
#documentModal{
.modal-body{
min-height: 450px;
margin-bottom: -27px;
}
.modal-footer {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 400;
background: #f1f1f1;
border-top: 1px solid #e0e0e0;
border-radius: 6px;
}
.modal-dialog{
width: 700px;
}
.modal-close, .modal-close:hover{
color: #000000;
font-weight: bolder;
font-size: 24px;
}
.modal-header{
height: 60px;
}
}
Angular
var _erromessage = angular.element(document.querySelector('#documentModal'));
if(($rootScope.progressValuePercentage === 0) && (docType !== "jobDescription") && ($scope.files_Failed.length > 0)) {
console.log("Calling modal");
_erromessage.modal('show');
}
Can any one help me with this ? Thanks in advance.

I was having same problem, to make it work I had to change css a lill bit
.fade.in {
opacity: 1;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-backdrop.in {
opacity: 0.5;
}

css ul list multiple item alignment

I have a ul element that conatins multiple items in line. I put my list in 300px fixed panel.
<div class="panel panel-primary" style="width:300px">
<div class="panel-heading"> Menu Items</div>
<div class="panel-body">
<ul>
<li>
<div class="content">
<button class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-th" ></span>
</button>
A Long Menu Item Name
<div class="settings">
<div class="show-settings pull-rigth">
<div class="btn-group pull-right">
<button class="btn btn-xs btn-info">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-xs btn-info">
<span class="glyphicon glyphicon-eye-close"></span>
</button>
</div>
</div>
<button class="btn btn-xs btn-default pull-right">
<span class="glyphicon glyphicon-cog"></span>
</button>
</div>
</div>
</li>
</ul>
</div>
And my css settings is here
ul, li {
list-style: none; margin: 0; padding: 0;
}
ul { padding-left: 1em; }
li { padding-left: 0; }
.show-settings{
display: none;
}
.settings:hover .show-settings{
display : block;
}
.content{
position: relative;
padding: .4em .4em .4em 0.2em;
*padding: .4em;
margin: .5em 0;
background: #D9EDF7 ;
color: #444;
text-decoration: none;
border-radius: .3em;
}
Working code is here.
My settings class item is going out of blue content.
My settings button count may be 3 or 4. Is it possible to overflow to the menu item the text like this:
Or flowing new line in content.

Add display:inline to your settings class
.settings{
display:inline;
}
DEMO
UPDATE
You have a typo in writing a class below div.settings. It is as below:
<div class="show-settings pull-rigth">
<!--^^^^^-->
It should have been
<div class="show-settings pull-right">
May be its in fiddle but still a point to note.

I have modified your structure a bit. try the below code, you can even fine tune it.
Html
<div class="panel panel-primary" style="width:300px">
<div class="panel-heading"> Menu Items</div>
<div class="panel-body">
<ul>
<li>
<div class="content">
<button class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-th" ></span>
</button>
<span class="title">A Long Menu Item Name A Long Menu Item Name</span>
<div class="settings">
<button class="btn btn-xs btn-default pull-right">
<span class="glyphicon glyphicon-cog"></span>
</button>
<div class="show-settings pull-rigth">
<button class="btn btn-xs btn-info pull-right">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-xs btn-info pull-right">
<span class="glyphicon glyphicon-eye-close"></span>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
CSS
ul, li {
list-style: none; margin: 0; padding: 0;
}
ul { padding-left: 1em; }
li { padding-left: 0; }
.show-settings{
display: none;
}
.settings{
position: absolute;
top: 8px;
right: 9px;
width: 75px;
}
.settings:hover .show-settings{
display : block;
}
.content{
position: relative;
padding: .4em .4em .4em 0.2em;
*padding: .4em;
margin: .5em 0;
background: #D9EDF7 ;
color: #444;
text-decoration: none;
border-radius: .3em;
position: relative;
}
span.title {
display: inline-block;
width: 70%;
padding-left: 3px;
}
.btn-default{
vertical-align: top;
}

Try using this.
in css -
.settings { display: inline-block; white-space: nowrap; vertical-align: middle; }
.menu-label { display: inline-block; vertical-align: middle; }
in html -
change this
</button>
A Long Menu Item Name
<div class="settings">
to this
</button>
<span class="menu-label">A Long Menu Item Name</span>
<div class="settings">

You can use float:right; margin-top:3px; to the .settings class.