paper-kit-2-angular icon indicating copy to clipboard operation
paper-kit-2-angular copied to clipboard

Dropdown Menus in collapsed version display issue.

Open WhiteDragonD opened this issue 7 years ago • 0 comments

I created a drop down menu then shortened the browser width to a mobile size.

<li class="nav-item">
	<a href="https://www.facebook.com/" class="nav-link"><i class="fa fa-facebook-square"></i> Facebook</a>
</li>

<li class="nav-item">
	<div class="dropdown">
		<button class="btn btn-primary btn-small dropdown-toggle" type="button" id="InfodropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<i class="fa fa-info-circle"></i> Info
		</button>
		<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
			<a class="dropdown-item" href="/Page1.php">Page1</a>
			<a class="dropdown-item" href="/Page2.php">Page2</a>
		</div>
	</div>
</li>

<li class="nav-item">
	<a class="btn btn-danger"  role="button" href="https://tickets.com" target="_blank">Buy Tickets</a>
</li>

When looking at mobile size, the Page1 and Page 2 are behind the Buy Tickets button.

I did tweak the CSS to make it work, submitting this bug so you can take a look.

paper-kit.css changes .dropdown .dropdown-menu { position: relative; } .navbar .navbar-nav .dropdown-menu { /** Commenting out for collapse menu overlay height: 400px; overflow-y: scroll; **/ }

WhiteDragonD avatar May 24 '18 19:05 WhiteDragonD