Question 43451 in Html Question posted in
Some basic documentation can be found here.

How can i make my search bar fit to the end of my container while being responsive? – Html

In my website i have a container and a search bar to search items, the thing is my search bar only goes half way instead of to the end of the container. I tried adding width:19% in "container form" and it does work except when i shrink or stretch the screen it moves out of it. Can someone help me fix this issue?
The search bar not going to the end

This is my code:

body {
  width: 100%;
  height: 100vh;
  background: rgb(240, 239, 243);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width: 375px;
  height: 520px;
  background: white;
  border-radius: 15px;
  box-shadow: 4px 4px 30px rgb(0, 0, 0, 0.06);
  padding: 20px;
  overflow-y: scroll;
}

.container::-webkit-scrollbar {
  display: none;
}

.container form {
  border: 1px solid rgb(82, 74, 235);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
}

.container form input {
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 10px;
}
<section class="container">

  <form>
    <i class="fas fa-search"></i>
    <input type="text" name="" id="search-item" placeholder="Search products" onkeyup="search()">
  </form>

  <div class="product-list" id="product-list">

    <div class="product">
      <img src="img/tshirt1.jpg" alt="">
      <div class="p-details">
        <h2>Black Tshirt</h2>
        <h3>$25</h3>
      </div>

    </div>
  </div>
</section>
Tags:

4

Answers


  1. 0

    While there are improvements that could be made in addition to this, the one change I made – which resolved the problem – was the removal of position: absolute from the following declaration:

    .container form {
  border: 1px solid rgb(82, 74, 235);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* comment out, or remove, the following
     line:
  position: absolute; */
}

    body {
  width: 100%;
  height: 100vh;
  background: rgb(240, 239, 243);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width: 375px;
  height: 520px;
  background: white;
  border-radius: 15px;
  box-shadow: 4px 4px 30px rgb(0, 0, 0, 0.06);
  padding: 20px;
  overflow-y: scroll;
}

.container::-webkit-scrollbar {
  display: none;
}

.container form {
  border: 1px solid rgb(82, 74, 235);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* commented out this line:
  position: absolute;
  */
}

.container form input {
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 10px;
}
    <!-- admittedly I also added this <link>, but that's
     purely because you were referencing font-awesome
     classes, and that irked me when font-awesome wasn't
     included. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" type="text/css" rel="stylesheet">
<section class="container">

  <form>
    <i class="fas fa-search"></i>
    <input type="text" name="" id="search-item" placeholder="Search products" onkeyup="search()">
  </form>

  <div class="product-list" id="product-list">

    <div class="product">
      <img src="img/tshirt1.jpg" alt="">
      <div class="p-details">
        <h2>Black Tshirt</h2>
        <h3>$25</h3>
      </div>

    </div>
  </div>
</section>
    Login or Signup to reply.
  2. 0

    I managed to fix it by setting the form width to inherit so that it takes on the containing parent section element’s width.

    body {
  width: 100%;
  height: 100vh;
  background: rgb(240, 239, 243);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width: 375px;
  height: 520px;
  background: white;
  border-radius: 15px;
  box-shadow: 4px 4px 30px rgb(0, 0, 0, 0.06);
  padding: 20px;
  overflow-y: scroll;
}

.container::-webkit-scrollbar {
  display: none;
}

.container form {
  border: 1px solid rgb(82, 74, 235);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
}

.container form input {
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 10px;
}

.myform{
  width:inherit;
}
    <section class="container">

  <form class="myform">
    <i class="fas fa-search"></i>
    <input type="text" name="" id="search-item" placeholder="Search products" onkeyup="search()">
  </form>

  <div class="product-list" id="product-list">

    <div class="product">
      <img src="img/tshirt1.jpg" alt="">
      <div class="p-details">
        <h2>Black Tshirt</h2>
        <h3>$25</h3>
      </div>

    </div>
  </div>
</section>
    Login or Signup to reply.
  3. 0

    To make your search bar fit to the end of the container and be responsive, you can use the following CSS changes:

    1. Remove the position: absolute; from the .container form selector.
    2. Add width: 100%; to the .container form selector.
    3. Add flex: 1; to the .container form input selector.

    Here’s the updated CSS:

    ```css
body {
  width: 100%;
  height: 100vh;
  background: rgb(240, 239, 243);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width: 375px;
  height: 520px;
  background: white;
  border-radius: 15px;
  box-shadow: 4px 4px 30px rgb(0, 0, 0, 0.);
  padding: 20px;
  overflow-y: scroll;
}

.container::-webkit-scrollbar {
  display: none;
}

.container form {
  border: 1px solid rgb(82, 74, 235);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%; /* Add this line */
}

.container form input {
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 10px;
  flex: 1; /* Add this line */
}
```

    These changes will make your search bar fit the container width and be responsive when resizing the screen.

    Login or Signup to reply.
  4. 0

    I fixed the input width just by giving its width 375px which is exactly equal to container width..
    Here is the updated code

    body {
  width: 100%;
  height: 100vh;
  background: rgb(240, 239, 243);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width: 375px;
  height: 520px;
  background: white;
  border-radius: 15px;
  box-shadow: 4px 4px 30px rgb(0, 0, 0, 0.06);
  padding: 20px;
  overflow-y: scroll;
}

.container::-webkit-scrollbar {
  display: none;
}

.container form {
  border: 1px solid rgb(82, 74, 235);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
}

.container form input {
  border: none;
  outline: none;
  box-shadow: none;
  **width: 375px;** 
  font-size: 16px;
  font-weight: 600;
  padding: 8px 10px;
}

.search-item {
  padding:110px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search