I have a navbar and a link btn floated right in the navbar. The link btn triggers the dropdown. I'd like the dropdown to open fixed to the right side of the viewport. When the dropdown opens it currently is half hidden beyond the right of the viewport. Even with the dropdown-menu-right class added to the dropdown-menu div.
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="btn btn-primary align-middle" href="/Home">Home</a>
</li>
<li class="nav-item">
<a class="btn btn-default align-middle" href="#link1">link1</a>
</li>
<li class="nav-item">
<a class="btn btn-default align-middle" href="#link2">link2</a>
</li>
<li class="nav-item">
<a class="btn btn-default align-middle" href="#link3">link3</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Try it free</button>
<span> or </span>
<div class="dropdown">
<a class="text-primary btn-link btn" href="#" id="loginMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-shield" aria-hidden="true"></span> Login</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="loginMenu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
</div>
</div>
I'd like to be able to use bootstrap classes to achieve the desired effect IF possible. Likely i will need to add some custom style as the menu is collapsible which pushes the dropdown trigger link button to the left. I'd like the dropdown to still open positioned to the right of the viewport in this case. Would be interested in understanding why the dropdown-menu-right is not working at all? thanks!
