The design I'm trying to code:
I attempted to code this design of form input, but I encountered a problem when I used display: flex
. The width of the input shortens instead of expanding as I expected.
The result of my code:
Here are the results of what I did, the width of my form input is already set to 100%. I have it in display: flex
because I need the dropdown, input, and search button to stick together. Anyway, here's my code. Please let me know if anything is incorrect.
.search-button {
display: flex;
justify-content: left;
margin-left: .4em;
margin-bottom: 1em;
}
.div-1-s1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
background-color: white;
border-radius: 5px 0 0 5px;
border: 1px solid white;
padding: .8em .7em .8em .75em;
margin-left: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.div-1-s1 img {
padding-left: 0.6rem;
}
.div-2-s1 {
display: flex;
}
.div-2-s1 input {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
padding: .8em 0 .8em .9em;
border: 1px solid white;
line-height: 1.25rem;
width: 100%;
max-width: 100%;
}
#sent-icon {
padding: .7em .5em .7em .5em;
margin-right: 1em;
border-radius: 0 5px 5px 0;
border: 1px solid white;
background-color: white;
}
<div class="search-button">
<div class="div-1-s1">
<span>All</span>
<img src="t-icon.svg" alt="a svg icon" />
</div>
<div class="div-2-s1">
<form action="#">
<input type="text" id="label" placeholder="Search a
location">
</form>
<img src="f2-icon.svg" alt="a svg icon" id="sent-icon" />
</div>
</div>
You just need to add width: 100%
to the form as well
See this:
body {
width: 100%;
}
.search-button {
display: flex;
justify-content: left;
margin-left: .4em;
margin-bottom: 1em;
width: 100%;
}
.div-1-s1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
background-color: white;
border-radius: 5px 0 0 5px;
border: 1px solid white;
padding: .8em .7em .8em .75em;
margin-left: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.div-1-s1 img {
padding-left: 0.6rem;
}
.div-2-s1 {
display: flex;
width: 100%;
}
form {
width: 100%;
}
.div-2-s1 input {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
padding: .8em 0 .8em .9em;
border: 1px solid black;
/* change it back to white */
line-height: 1.25rem;
width: 100%;
}
#sent-icon {
padding: .7em .5em .7em .5em;
margin-right: 1em;
border-radius: 0 5px 5px 0;
border: 1px solid white;
background-color: white;
}
<div class="search-button">
<div class="div-1-s1">
<span>All</span>
<img src="t-icon.svg" alt="a svg icon" />
</div>
<div class="div-2-s1">
<form action="#">
<input type="text" id="label" placeholder="Search a location">
</form>
<img src="f2-icon.svg" alt="a svg icon" id="sent-icon" />
</div>
</div>