CODEWITHSUNDEEP
htmlcss
user7553592
user7553592

Reputation:

Align Text box in dropdown towards left css

Need help to display the text box to the left side of Track. This is what it should look like.

enter image description here

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #94CB32;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<div class="dropdown">
  <a href="#">Track</a>
  <div class="dropdown-content">

    <input type="text" placeholder="OrderID" ID="Button1" Text="Track">
    <input type="button" value="Track" />

  </div>
</div>

Upvotes: 0

Views: 1876

Answers (2)

hungerstar
hungerstar

Reputation: 21685

Add the following to .dropdown-content:

top: 0;
right: calc( 100% + 5px );

Note that when you hover one element to show another you have to be careful about the placement. If there is a gap between the parent element and the child element you'll no longer be hovering the parent element and the child will disappear. To fix this you need both elements to touch one another. You can do this by making sure they touch (butted up next to each other or overlap on another), add padding (which might not be ideal if using a background color) or use a pseudo element. I did the latter so I added this selector:

.dropdown-content:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  top: 0;
  right: -5px;
  bottom: 0;
}

This solution does what you have show in your image but I'm not sure how you want (are going to) handle the space to the left of the .dropdown. I reduced the width of body so you can see it fly out.

body {
  width: 40%;
  margin: 25px auto;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

/* Fills gap between Track and flyout so it will continue to show when moving mouse. */
.dropdown-content:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  top: 0;
  right: -5px;
  bottom: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 0;
  right: calc( 100% + 5px );
  background-color: #94CB32;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<div class="dropdown">
  <a href="#">Track</a>
  <div class="dropdown-content">

    <input type="text" placeholder="OrderID" ID="Button1" Text="Track">
    <input type="button" value="Track" />

  </div>
</div>

Upvotes: 0

Lucian
Lucian

Reputation: 1713

it's simple, use display: flex for the dropcontent

check the updated snippet

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #94CB32;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: flex;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<html>


<div class="dropdown">
  <a href="#">Track</a>
  <div class="dropdown-content">

    <input type="text" placeholder="OrderID" ID="Button1" Text="Track">
    <input type="button" value="Track" />

  </div>


</div>

</html>

Upvotes: 2

Related Questions