Issue
`I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive
.top-section{
padding-top: 2rem;
}
.btn-search{
background-color: #EEEFEE;
border-radius: 0px !important;
}
.fa-search{
color: #8E8F8F;
}
.form-control{
border-radius: 0px !important;
}
.link-end{
text-align: end;
display: flex;
justify-content: end;
align-items: baseline;
}
.first-link{
margin-right: 2rem;
}
@media (max-width:991px) {
.link-end{
padding-top: 2rem;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<link rel="stylesheet" href="contact.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print-Shop Contact</title>
</head>
<body>
<div class="top-section">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-12">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-search" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<!--Empty Div-->
<div class="col-lg-4 d-md-block d-none"></div>
<!--End of Empty Div-->
<div class="col-lg-4 col-12">
<div class="link-end">
<a href="#" class="first-link">Help</a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>I want the dropdown menu to be responsible. It only got irresponsible when I align both to inline. I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive
Solution
To test the grid structure, I removed the styles that added margin and padding to the elements. Then I updated the columns for responsive design; see the reference document for the grid system to be displayed differently in different browser sizes.
.btn-search {
background-color: #EEEFEE;
}
.fa-search {
color: #8E8F8F;
}
.link-end {
text-align: end;
display: flex;
justify-content: end;
align-items: baseline;
}
.first-link {
margin-right: 10px;
}
.customDropdownStyle{
margin-right: 110px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<link rel="stylesheet" href="contact.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print-Shop Contact</title>
</head>
<body>
<div class="top-section">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-search" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="link-end">
<a href="#" class="first-link">Help</a>
<div class="dropdown customDropdownStyle">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>References
Answered By - Sercan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.