CODEWITHSUNDEEP
javascriptcss
imvain2
imvain2

Reputation: 15847

Reveal input to the left not the right

I have code that shows and reveals an input box to the right of the search icon. I'm looking to have it slide open so the input is on the left side. However, my attempts just make matters worse.

Your assistance is appreciated.

Below is the working example that shows the input box revealing to the right side.

var search_btn = document.querySelector(".search-btn");
search_btn.addEventListener("click",function(){
    document.querySelector('.search-slide').classList.toggle("active");
   document.querySelector('.search-slide input[type=search]').focus();
})

var close_btn = document.querySelector(".search-close");
close_btn.addEventListener("click",function(){
   document.querySelector('.search-slide').classList.toggle("active");
});
input {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
}

input[type=submit],
input[type=button] {
  cursor: pointer;
}

.ib-m {
  display: inline-block;
  vertical-align: middle;
}
.search {
  min-width: 18.9375em;
}
.search input[type=submit] {
  vertical-align: middle;
  width: 1.375em;
  height: 1.375em;
  border: none;
  outline: none;
  background: none;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
.search input[type=submit]:hover {
  opacity: .5;
}
.search input[type=search] {
  width: 14em;
  height: 2.5em;
  padding: 0 .375em;
  border: none;
  border-bottom: 1px solid #000;
  margin-left: .1875em;
  background: inherit;
  -webkit-transition: border-color 100ms ease-in-out;
  transition: border-color 100ms ease-in-out;
}
.search input[type=search]:focus {
  border-bottom-color: inherit;
  outline: none;
}

.search-slide {
  width: 0;
  height: 2.5em;
  overflow: hidden;
  transition:width 0.3s ease;
}

.search-slide.active{width:15.5625em}

.search-close {
  width: 1.375em;
  height: 1.375em;
  text-align: center;
  cursor: pointer;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
.search-close:hover {
  opacity: .5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="search">
<input type="submit" value="&#xf002;" class="search-btn fa ib-m"><div class="search-slide ib-m">
<input type="search" placeholder="Enter your search" class="ib-m"><div class="search-close ib-m"><i class="fa fa-times"></i></div>
</div></div>

Below is my broken attempt to do what my ultimate goal is:

var search_btn = document.querySelector(".search-btn");
search_btn.addEventListener("click",function(){
    document.querySelector('.search-slide').classList.toggle("active");
   document.querySelector('.search-slide input[type=search]').focus();
})

var close_btn = document.querySelector(".search-close");
close_btn.addEventListener("click",function(){
   document.querySelector('.search-slide').classList.toggle("active");
});
input {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
}

input[type=submit],
input[type=button] {
  cursor: pointer;
}

.ib-m {
  display: inline-block;
  vertical-align: middle;
}
.search {
  min-width: 18.9375em;
}
.search input[type=submit] {
  vertical-align: middle;
  width: 1.375em;
  height: 1.375em;
  border: none;
  outline: none;
  background: none;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
.search input[type=submit]:hover {
  opacity: .5;
}
.search input[type=search] {
  width: 14em;
  height: 2.5em;
  padding: 0 .375em;
  border: none;
  border-bottom: 1px solid #000;
  margin-left: .1875em;
  background: inherit;
  -webkit-transition: border-color 100ms ease-in-out;
  transition: border-color 100ms ease-in-out;
}
.search input[type=search]:focus {
  border-bottom-color: inherit;
  outline: none;
}

.search-slide {
  width: 0;
  height: 2.5em;
  overflow: hidden;
  transition:width 0.3s ease;
}

.search-slide.active{width:15.5625em}

.search-close {
  width: 1.375em;
  height: 1.375em;
  text-align: center;
  cursor: pointer;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
.search-close:hover {
  opacity: .5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="search">
<input type="search" placeholder="Enter your search" class="ib-m"><div class="search-slide ib-m">
<input type="submit" value="&#xf002;" class="search-btn fa ib-m"><div class="search-close ib-m"><i class="fa fa-times"></i></div>
</div></div>

Upvotes: 0

Views: 57

Answers (2)

terrymorse
terrymorse

Reputation: 7086

Not sure if this is what you are looking for, but here it is:

let search_btn = document.querySelector('.search-btn');
let search_div = document.querySelector('.search-div');
let search_input = document.querySelector('input[type=search]');
let search_close = document.querySelector('.search-close');
search_btn.addEventListener("click", function() {
  search_div.classList.add('show');
})

search_close.addEventListener("click", function() {
  search_div.classList.remove('show');
});
input {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
}

input[type=submit],
input[type=button] {
  cursor: pointer;
}

.ib-m {
  display: inline-block;
  vertical-align: middle;
}

.search {
  min-width: 18.9375em;
}

.search input[type=submit] {
  vertical-align: top;
  width: 1.375em;
  height: 1.375em;
  border: none;
  outline: none;
  background: none;
}

.search input[type=search] {
  width: 14em;
  height: 2.5em;
  padding: 0 .375em;
  border: none;
  border-bottom: 1px solid #000;
  margin-left: .1875em;
  background: inherit;
  -webkit-transition: border-color 100ms ease-in-out;
  transition: border-color 100ms ease-in-out;
}

.search-close {
  display: inline;
  width: 1.375em;
  height: 1.375em;
  text-align: center;
  cursor: pointer;
}

.search-content {
  width: 16rem;
}

.search-div {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: auto;
  transition: width 500ms ease-in-out;
}

.show {
  width: 16rem;
  height: auto;
  overflow: auto;
  transition: width 1000ms ease-in-out;
}
<div class="search">
  <div class="search-div">
    <div class="search-content">
      <input type="search" placeholder="Enter your search" class="ib-m">
      <div class="search-close ib-m"><i class="fa fa-times"></i></div>
    </div>
  </div>
  <input type="submit" value="&#xf002;" class="search-btn fa ib-m">
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

Upvotes: 0

SMAKSS
SMAKSS

Reputation: 10510

There are several ways to achieve what you want, one of the easiest one could be reordering the HTML elements. Also since you are using fonts for your icons, width and height attributes will not affect them. So you just have to specify their size by font-size.

So your code should be something like this:

var search_btn = document.querySelector(".search-btn");
search_btn.addEventListener("click", function() {
  document.querySelector('.search-slide').classList.toggle("active");
  document.querySelector('.search-slide input[type=search]').focus();
})

var close_btn = document.querySelector(".search-close");
close_btn.addEventListener("click", function() {
  document.querySelector('.search-slide').classList.toggle("active");
});
input {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
}

input[type=submit],
input[type=button] {
  cursor: pointer;
}

.ib-m {
  display: inline-block;
  vertical-align: middle;
}

.search {
  min-width: 18.9375em;
}

.search input[type=submit] {
  vertical-align: middle;
  border: none;
  outline: none;
  background: none;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}

.search input[type=submit]:hover {
  opacity: .5;
}

.search input[type=search] {
  width: 14em;
  height: 2.5em;
  padding: 0 .375em;
  border: none;
  border-bottom: 1px solid #000;
  margin-left: .1875em;
  background: inherit;
  -webkit-transition: border-color 100ms ease-in-out;
  transition: border-color 100ms ease-in-out;
}

.search input[type=search]:focus {
  border-bottom-color: inherit;
  outline: none;
}

.search-slide {
  width: 0;
  height: 2.5em;
  overflow: hidden;
  transition: width 0.3s ease;
}

.search-slide.active {
  width: 15.5625em
}

.search-close {
  text-align: center;
  cursor: pointer;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}

.search-close:hover {
  opacity: .5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="search">
  <div class="search-slide ib-m">
    <input type="search" placeholder="Enter your search" class="ib-m">
    <div class="search-close ib-m"><i class="fa fa-times"></i></div>
  </div>
  <input type="submit" value="&#xf002;" class="search-btn fa ib-m">
</div>

Upvotes: 1

Related Questions