How to make search bar width 100%

Question

I'm trying to set the search bar width for user search to 100%, but the code I've tried doesn't work when entered into the CSS.

This is the code I've tried to input into the CSS:

 .um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

But this is unsuccessful.

How can I achieve this?

Here's the page: https://slapperoni.com/members/

You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. — Rob, Jul 24 '22 at 12:42

score 0 · Answer 1 · answered Jul 24 '22 at 02:20

0

How about giving flex: 1 to the input element? https://developer.mozilla.org/en-US/docs/Web/CSS/flex

<div style="
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
">
  <input style="flex: 1;">
  <button>test</button>
</div>

Hope this helps you.

answered Jul 24 '22 at 02:20

TK'

302
2
10

How exactly would I enter this into the CSS? – Slapperoni Jul 24 '22 at 02:38
Can you post your html file and css file? – TK' Jul 24 '22 at 02:41
**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. [answer] – Rob Jul 24 '22 at 12:42

How to make search bar width 100%

1 Answers1