Expand search bar equally on both sides - Html

Hilow
February 14, 2023
112 views
2 votes
4 Answers

I’m trying to figure out how to make it look like this (the white box at the end of both sides is basically the continuation of the search-box):

I tried different ways to make it equally long on both left and right sides (to center it under my title) but unfortunately it always resulted in failure. The left side didn’t move and the right side just became wider.

I’m looking as well for a way to add some space between the arrow icon and the right border of the search-box. I tried adding some padding but it didn’t work.

.help-container {
  padding: 5rem 0;
  display: grid;
  place-content: center;
  background-color: #dadbf1;
}

h1 {
  font-size: 5rem;
  font-weight: 500;
  padding-bottom: 2rem;
}

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 1px solid #000000;
  padding: 5px;
  height: 45px;
  border-radius: 0.25rem;
  outline: none;
  color: #9dbfaf;
  font-size: 1rem;
  background-image: url("https://svgur.com/i/qJh.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 30px;
}

<section>
  <div class="help-container">
    <div class="help">
      <h1>How can we help?</h1>
      <div class="search">
        <input type="text" class="searchTerm" placeholder="Search" />
      </div>
    </div>
  </div>
</section>

https://codepen.io/686579/pen/zYJYPWB

Tags: css html

Answers

I added a div before searchbar with an inline CSS to let you see what I added, and deleted width: 100% in searchbar. That is why it was not centered

.help-container {
  padding: 5rem 0;
  display: grid;
  place-content: center;
  background-color: #dadbf1;
}

h1 {
  font-size: 5rem;
  font-weight: 500;
  padding-bottom: 2rem;
}

.search {
  padding: 0 50px;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 1px solid #000000;
  padding: 5px;
  height: 45px;
  border-radius: 0.25rem;
  outline: none;
  color: #9dbfaf;
  font-size: 1rem;
  background-image: url("https://svgur.com/i/qJh.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 30px;
}

<section>
  <div class="help-container">
    <div class="help">
      <h1>How can we help?</h1>
      <div style="background-color: white;">
        <div class="search">
          <input type="text" class="searchTerm" placeholder="Search" />
        </div>
      </div>
    </div>
  </div>
</section>

You may add this rule to the .search container:

.search::before {
  position: absolute;
  width: calc(100% - (2 * 3em));
  height: var(--height);
  padding: var(--padding);
  content: '';
  left: 50%;
  transform: translateX(-50%);
  background: white;
  z-index: 1;
}

So that you have a pseudo element bound to the <input> container that will be positioned absolute while having width: 100% minus an arbitrary amount being your padding.

I also zeroed the padding/margin on html, body and used custom variables to hold the padding and height you are using on your input so that it will be replicated on the pseudo element.

This long route was required to have a separated element to style with different criteria using css alone.

html, body{
  padding: 0;
  margin: 0;
}

.help-container {
  padding: 5rem 0;
  display: grid;
  place-content: center;
  background-color: #dadbf1;
}

h1 {
  font-size: 5rem;
  font-weight: 500;
  padding-bottom: 2rem;
}

.search {
  --height: 45px;
  --padding: 5px;

  width: 100%;
  /*position: relative;*/
  display: flex;  
}

.searchTerm {

  height: var(--height);
  padding: var(--padding);    
  z-index: 2;

  width: 100%;
  border: 1px solid #000000;  
  border-radius: 0.25rem;
  outline: none;
  
  color: #9dbfaf;
  font-size: 1rem;
  background-image: url("https://svgur.com/i/qJh.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 30px;
}

.search::before {
  position: absolute;
  width: calc(100% - (2 * 3em));
  height: var(--height);
  padding: var(--padding);
  content: '';
  left: 50%;
  transform: translateX(-50%);
  background: white;
  z-index: 1;
}

<section>
  <div class="help-container">
    <div class="help">
      <h1>How can we help?</h1>
      <div class="search">
        <input type="text" class="searchTerm" placeholder="Search" />
      </div>
    </div>
  </div>
</section>

You can change your input width for 80% instead 100% and use justify-content to center the input and for adding a white space in your bg-input try using percentages instead right. If you want to know more about it check how to use background-position.

.help-container {
  padding: 5rem 0;
  display: grid;
  place-content: center;
  background-color: #dadbf1;
}

h1 {
  font-size: 5rem;
  font-weight: 500;
  padding-bottom: 2rem;
}

.search {
  width: 100%;
  position: relative;
  display: flex;
  background-color: white;
  justify-content: center;
}

.searchTerm {
  width: 80%;
  border: 1px solid #000000;
  padding: 5px;
  height: 45px;
  border-radius: 0.25rem;
  outline: none;
  color: #9dbfaf;
  font-size: 1rem;
  background-image: url('https://svgur.com/i/qJh.svg');
  background-repeat: no-repeat;
  background-position: 95% center;
  background-size: 30px;
}

<section>
  <div class="help-container">
    <div class="help">
      <h1>How can we help?</h1>
      <div class="search">
        <input type="text" class="searchTerm" placeholder="Search" />
      </div>
    </div>
  </div>
</section>

- BransonSmith
- February 15, 2023 at 7:07 pm
- 0 votes
0
You are trying to make the search bigger than the nodes/elements that contain it.

Make sure to set the width of the containing components to something bigger.

To center using display: flex;, you can set a container to use flex, and then use margin: auto; in the child element to automatically center with the containing-flexed-element.

Here is updated html that gives a class to each container. Notice I added class="search-background" so I can give that element a width.

example.html
```
<section>
    <div class="help-container">
        <div class="help">
        <h1>How can we help?</h1>
        <div class="search-background" style="background-color: white;">
            <div class="search">
            <input type="text" class="searchTerm" placeholder="Search" />
            </div>
        </div>
        </div>
    </div>
</section>
```
Here is updated css with display flex on all containing elements (and flex direction of column so that things are displayed vertically, display flex defaults to horizontal)

Containers have display: flex;, centered items have margin: auto;
You can customize the actual widths of each element to your desire. Use margin to adjust the element right or left. margin "auto" just tells it to fill the difference between the parent and child element’s width.

example.css
```
.help-container {
    padding: 5rem 0;
    display: grid;
    place-content: center;
    background-color: #dadbf1;
    width: 100%;
    display: flex;
    border: 1px solid green;
  }
  
.help {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid red;
}

  h1 {
    font-size: 5rem;
    font-weight: 500;
    padding-bottom: 2rem;
    width: fit-content;
    margin: auto;
  }
  
.search-background {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

  .search {
    position: relative;
    display: flex;
    width: 100%;
    margin: auto;
  }
  
  .searchTerm {
    width: 100%;
    border: 1px solid #000000;
    padding: 5px;
    height: 45px;
    border-radius: 0.25rem;
    outline: none;
    color: #9dbfaf;
    font-size: 1rem;
    background-image: url("https://svgur.com/i/qJh.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 30px;
  }
```
Here’s a screenshot of it on my machine. The red border is only there to help visualize the container needed to be adjusted.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Expand search bar equally on both sides – Html

Answers