CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eric Kim
Eric Kim

Reputation: 2696

Place element relative to another element

First, here's the link to fiddle: https://jsfiddle.net/ad7vmhs1/

I want to put the search button, $('#search-btn'), next to the search box, $('#search-box'). I want the search box to be in the center when navbar is expanded, so I set it like this:

#search-btn {
  position: absolute;
}

But now search-btn is not in the place i want it to be. I looked up some codes that will put $('#search-btn') relative next to $('#search-box'), and got something like this:

window.pos = $('#search-box').position();
$('.navbar-toggler').on('click', function () {
    if (window.windowSize < 960) {
        $("#search-btn").css({
            position: "absolute",
            top: pos.top + "px",
            left: (pos.left + width + 10) + "px"
        })
    }
})

This codes seems to work, except that it doesn't correctly capture the position of the search box when navbar is collapsed. How can I do this?

Desired output:

enter image description here

The above image is the one that I desire - The search box is positioned at the center, and search button is positioned next to it.

The bottom image is the output if I remove "position: absolute" for $('#search-btn'). The combination of search box + search button is positioned at the center.

Upvotes: 2

Views: 113

Answers (3)

Agnikim Pro
Agnikim Pro

Reputation: 7

You can simple do this in this class

#search-btn {
  position: absolute;
  right: 80px;
  top: 162px;
}

This is just a hard code solution for your site.

Upvotes: 0

Gershom Maes
Gershom Maes

Reputation: 8178

Javascript shouldn't be necessary here. Put the search bar and the search button in the same "common parent element", and make only the search button position: absolute. The search bar's size will determine the size of the "common parent element", while the search button will be absolutely positioned, always floating to the side of the "common parent element":

.menu {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
}
.option {
  position: relative;
  width: 200px;
  height: 30px; line-height: 30px;
  /* margin-left = width / -2 */
  left: 50%; margin-left: -100px;
  text-align: center;
}
.option.search > .search-bar {
  /* margin-top = (30 - height) / 2 */
  width: 200px; height: 26px; margin-top: 2px;
  border: none;
  box-shadow: inset 0 0 0 1px #000000;
  text-align: center;
  font-size: 100%;
}
.option.search > .search-btn {
  position: absolute;
  left: 100%; top: 50%;
  margin-left: 10px;
  width: 60px;
  /* margin-top = height / -2 */
  height: 30px; line-height: 30px; margin-top: -15px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #00a000;
  color: #00a000;
}
<div class="menu">
  <div class="option">Option 1</div>
  <div class="option">Option 2</div>
  <div class="option">Option 3</div>
  <div class="option search">
    <input type="text" class="search-bar" placeholder="Search" />
    <div class="search-btn">Search</div>
  </div>
</div>

This layout should work in just about any reasonable situation.

Upvotes: 3

zer0
zer0

Reputation: 5017

Update: Closer to your updated request: https://jsfiddle.net/ad7vmhs1/10/

I used media queries in CSS and updated the HTML

<form class="form-inline my-2 my-lg-0 justify-content-center">
   <div class="search-container">
      <input id="search-box" class="form-control mr-sm-2 hidden" type="search" placeholder="Search by #tag" aria-label="Search">
      <button id="search-btn" class="btn btn-search btn-outline-success my-2 my-sm-0 btn-circle" type="button">Search</button>
   </div>
</form>

CSS:

// Choose your breakpoint. I'm setting 1000px as a demo
@media (max-width: 1000px) {
  .search-container{
    max-width: 250px;
    display: flex;
  }
  .search-container input{
    min-width: 250px;
  }
}

Previous Answer:

Just remove position: absolute for the search button

#search-btn {
  /* position: absolute; */
}

Upvotes: 2

Related Questions