In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using:
text-align: left;
But unfortunately, the arrow in the dropdown is still not aligned to the right, and I am unsure of how to achieve this.
https://i.stack.imgur.com/0J9dj.png
This is what my HTML file looks like:
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<form class="form-inline">
<div class="form-group">
<div class="col-md-8">
<input type="email" class="form-control" placeholder="Email Address" id="email-form">
</div>
</div>
<div class="dropdown">
<div class="col-md-8">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown"> Interested In... </button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Here is a snippet from my CSS file as well:
body
{
background: #000639;
}
#email-form
{
line-height: 250%;
margin-right: 115px;
width: 158%;
}
#dropdown
{
line-height: 250%;
width: 238%;
text-align: left;
}
.row
{
margin-top: 10%;
}
You can view the full screen image here: