I have set up a bootstrap navigation bar along with a form to the right. An additional custom error box is designed to be displayed at the bottom of the form in the browser.
https://i.sstatic.net/6c6Zz.png However, when viewed in responsive mode, the layout changes as shown in this image: https://i.sstatic.net/9g5xE.png The issue arises due to the error box being positioned absolutely. I am looking for ways to improve its display on mobile and tablet devices.
The objective is to have the error box appear similar to the first image but showcased before the search (which should instead be changed to login) button on mobile/tablet screens.
It's important to note that jqueryvalidation is not being used. These errors will originate from .NET Core, and currently, positioning them correctly has been quite challenging for me.
.navbar {
min-height: 70px;
background-color: #fff;
border-bottom: 1px solid #eee;
}
.navbar-brand {
height: 70px;
line-height: 55px;
}
.navbar-toggler {
border: 0 !important;
border-radius: 0 !important;
}
.navbar-toggler:active,
.navbar-toggler:focus {
outline: 0;
}
.dropdown-menu {
border-color: #eee;
border-radius: 0;
}
.error {
background-color: red;
color: #fff;
padding: 5px;
border-radius: 5px;
position: absolute;
top: 65px;
right: 240px;
}
.arr {
width: 0;
height: 0;
position: absolute;
top: -7px;
margin-left: 80px;
text-indent: -9999px;
border-right: 8px solid transparent;
border-bottom: 8px solid blue;
border-left: 8px solid transparent;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light py-0">
<div class="container-fluid px-0">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-0 ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="password" aria-label="password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
<div class="error">
<div class="arr"></div>
<p>Error box with validation</p>
</div>
</form>
</div>
</div>
</nav>