Anonymous Anonymous - 5 days ago
123 0

No description

HTML

HTML123

<div class="name-btn" >
	      <button class="btn btn-primary dropdown-toggle" id="user-btn" type="button" data-toggle="dropdown"><span>{{ username }}</span>
	        <span class="caret"></span>
	      </button>
	      <ul class="dropdown-menu" id="user-dropdown">
	      	<li><a href="/management" class="dropdown-item">Admin settings</a></li>
	        <li><a href="#" class="dropdown-item"><span>User settings</span></a></li>
	        <li><a href="/logout" class="dropdown-item">Logout</a></li>
	      </ul>
	  </div>
CSS

CSS123123

.name-btn {
	min-width: 159px;
	height: 60px;
	margin: 0 13px 0 0;
	vertical-align: middle;
	display: inline;
	float: right;
}

#user-btn {
	float: left;
	min-width: 154px;
	margin: 13px 0;
}
Javascript

JS123123

$(".name-btn").click(function(){
		var position = $(this).position();
		var posX = position.left
		var posY = position.top + 47
		var width = $(this).offsetWidth
		$('#user-dropdown').css({
			left: posX + "px",
			top: posY + "px",
			width: width
		});
		console.log(position)
	});