Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by alexander Atuh
alexander Atuh
987 Points

How do you build a search box with an attached search button ?

I've tried this but everytime i test the response by minimizing the window the search button detaches from the search box

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You need to include your code to illustrate the problem.

You can share everything at once if you make a snapshot of your workspace and provide the link to it.

alexander Atuh
alexander Atuh
987 Points

Steven Parker https://w.trhou.se/x1cd024eak thank you

alexander Atuh
alexander Atuh
987 Points

Steven Parker https://w.trhou.se/vkkcaaiend this is the link sorry i thought i sent this long time ago, anyways, yeah i'm still having issues

Thank You

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: Try adding an id or class (I used "search" for this example) to identify the enclosing DIV:

      <div id="search"> <!-- added id here -->
        <span id="search-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
        <input id="search-field-box" type="text" placeholder="Search">
      </div>

...and then add this CSS:

#search { white-space: nowrap; }

:sparkles:

Also, while it doesn't appear related to your issue, I found this line really curious:

  <link rel="javascript" href="js/sample.css">

I'm pretty sure "javascript" is not a valid relationship type, and it seems very odd to have a file with .css extension inside a folder named "js". Whatever that file is, I don't think it's being included properly.

alexander Atuh
alexander Atuh
987 Points
alexander Atuh
alexander Atuh
987 Points

hmm i tried that but it didn't work..

Also i made a mistake on sample.css i meant to write sample.js, i just made the correction now thank you.

I wanted it to look like the google search box with the "search icon" inside the box