Html - display: flex moves submit button and how to make it "attached" to the input text

8bitmd
July 31, 2023
252 views
1 vote
2 Answers

I’m trying to replicate this:

If you can’t see it, both the icon on the left and the textbox have a light gray border, and the button to submit (Rechercher) is attached to the textbox.

Here’s what I managed to do

For clarity reasons I changed the border colour.
Here you can see that the submit button isn’t part of the 2 other items, and when I implement it into the Flexbox container here’s what happens:

With display: flex

How can I make it more like the model I’m trying to replicate?

.barre-rechercher {
  display: flex;
  flex-direction: row;
  margin: 35px 0 35px 0;
}

.fa-location-dot {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid red;
  border-radius: 10px 0 0 10px;
  background-color: #F2F2F2;
}

input[type="text"] {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 49px;
  border: 1px solid red;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

form>input[type="submit"] {
  color: white;
  height: 49px;
  border: 1px solid var(--main-color);
  border-radius: 0 15px 15px 0;
  background-color: var(--main-color);
}

<div class="barre-rechercher">
  <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;"></i>
  <form method="get" action="">
    <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
    <input type="submit" value="Rechercher">
  </form>
</div>

Answers

Add these two rules:

.barre-rechercher form {
  display: contents;
}
input {
  box-sizing: border-box;
}

The first one to make the children of the form be flex-children of the .barre-rechercher container, the second to make sure the height of both input elements is identical regardless of borders and paddings.

I also added border-right: none; to the text input field to attach the submit button directly to it without a border.

.barre-rechercher {
  display: flex;
  flex-direction: row;
  margin: 35px 0 35px 0;
}

.barre-rechercher form {
  display: contents;
}
.fa-location-dot {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid red;
  border-radius: 10px 0 0 10px;
  background-color: #F2F2F2;
}
input {
  box-sizing: border-box;
}
input[type="text"] {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 49px;
  border: 1px solid red;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  border-right: none;
}

form>input[type="submit"] {
  color: white;
  height: 49px;
  border: 1px solid blue;
  border-radius: 0 15px 15px 0;
  background-color: blue;
}

<div class="barre-rechercher">
  <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;"></i>
  <form method="get" action="">
    <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
    <input type="submit" value="Rechercher">
  </form>
</div>

Instead of a fixed height, I had set a min-height on the container. Now, it will always be responsive no matter how many contents are there.

.barre-rechercher {
    display: flex;
    flex-direction: row;
    margin: 35px 0 35px 0;
    /* added code */
    min-height: 49px;
}

.fa-location-dot {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #f2f2f2;
    border-radius: 10px 0 0 10px;
    background-color: #F2F2F2;
}

input[type="text"] {
    display: flex;
    align-items: center;
    gap: 24px;
    /* height: 49px; */
    border: 1px solid #f2f2f2;
    text-align: center;
    font-weight: 700;
    font-size: 18px;            
}

/* added code */
form{
    display: flex;
}

form > input[type="submit"] {
    color: white;
    /* height: 49px; */
    border: 1px solid #6666ff;
    border-radius: 0 15px 15px 0;
    background-color: #6666ff;
    cursor: pointer;
}

<div class="barre-rechercher">
    <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;">More <br> contents <br> can't <br> break <br> this one</i>
    <form method="get" action="">
        <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
        <input type="submit" value="Rechercher">
    </form>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – display: flex moves submit button and how to make it "attached" to the input text

Answers