Bom criei uma div chamada 'notification'. Onde eu irei colocar um texto e no fim dele tem um menu. Tudo esta funcionando bem, porém quando o texto e muito grande e a tela e pequena, o botão do menu fica sobre o texto, e ele não fica alinhado no centro vertical. Alguém sabe como corrigir isso?
Em alguns casos a div 'notification' não tera o menu.
$(document).ready(function() {
// Abre Sidenav
$(".overflow-menu").click(function() {
$(this).find("ul").animate({
height: 'toggle'
}, 'fast');
});
});
/*====================================================================================================================*/
/* Over-Flow Menu */
/*====================================================================================================================*/
.container-head .overflow-menu .material-icons {
padding-right: 20px;
}
.container-head .overflow-menu {
vertical-align: middle;
display: table-cell;
vertical-align: middle;
width: 24px;
position: relative;
cursor: pointer;
}
.notification .overflow-menu {
margin-right: 5px;
float: right;
margin-top: -4px;
display: table-cell;
vertical-align: middle;
width: 24px;
position: relative;
cursor: pointer;
}
.overflow-menu ul {
padding: 0;
position: absolute;
width: 260px;
display: none;
margin-left: -196px;
overflow: hidden;
border-radius: 0px 0px 4px 4px;
top: 50px;
}
.notification .overflow-menu ul {
text-align: left;
font-style: normal;
top: 22px;
margin-left: -220px;
}
.overflow-menu li {
padding-left: 10px;
line-height: 40px;
cursor: pointer;
color: #FFFFFF;
background: #484848;
}
.overflow-menu li:hover {
background: #0091FF;
}
/*====================================================================================================================*/
/* Notification */
/*====================================================================================================================*/
.notification {
background: #0091FF;
padding: 15px;
color: #FFFFFF;
font-style: italic;
text-a
}
lign:center;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Notification -->
<div class="notification">
<b>título</b> texto kjh jkkj k hk gh jghjgjk g jh jhgk hjg gkj hgj hg jhgj kjhgg jkhg jhg jg jhg j gjh gj g jhg j
<!-- Over-Flow Menu -->
<div class='overflow-menu'>
<i class="material-icons">more_vert</i>
<ul>
<li>OPÇÃO 1</li>
<li>OPÇÃO 2</li>
<li>OPÇÃO 3</li>
</ul>
</div>
</div>