CODEWITHSUNDEEP
htmlcss
arao6
arao6

Reputation: 3376

How can I attach a select dropdown to a text box?

I am trying to attach a select dropdown to a search box. So far, I kind of got it working on larger monitors:

search box

However, the problem is, when I resize my browser window to < 1100px width, the "Everything" gets cut off:

search text cut off

I tried applying a min-width of e.g. 150px to the dropdown but it doesn't seem to be having any effect. Adding a min-width to the container works, but when I resize the window, the controls break to the next line. I'm guessing that the approach I took (using a nested 12-column grid with no gutters to align the dropdown, text box, and button) isn't the right way to do this.

FIDDLE: https://jsfiddle.net/jh2fgmo7/

How can I attach the select dropdown to the text box but keep a minimum width equivalent to the select box's largest value (using CSS only)?

Update-

This is the desired result when resizing:

search bar desired result

CSS

body {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  font: normal 16px Arial, Helvetica, Verdana, Geneva;
}
body:after {
  content: " ";
  display: block;
  clear: both;
}
.tbnav {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  background: #303030;
  min-height: 55px;
}
.tbnav .logo {
  width: 11.39241%;
  float: left;
  margin-right: 1.26582%;
  margin-left: 3.16456%;
  background: url(/images/tb-logo.gif) no-repeat;
  height: 27px;
  min-width: 150px;
  margin-top: 14px;
}
.tbnav .search {
  width: 62.02532%;
  float: left;
  margin-right: 1.26582%;
}
.tbnav .search .searchcat {
  width: 11.01695%;
  float: left;
  height: 27px;
  margin-top: 11.5px;
}
.tbnav .search .searchcat select {
  height: 33px;
  width: 100%;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.tbnav .search .searchbox {
  width: 78.81356%;
  float: left;
  margin-right: 0;
  margin-left: 0;
  height: 27px;
  padding: 1px;
  padding-left: 5px;
  margin-top: 11.5px;
}
.tbnav .search .searchbtn {
  width: 6.77966%;
  float: left;
  height: 27px;
  margin-top: 11.5px;
}
.tbnav .search .searchbtn input {
  height: 33px;
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="tbnav">
        <div class="logo"></div>
        <div class="search">
            <div class="searchcat">
                <select name="c">
                    <option>Everything</option>
                </select>
            </div>
            <input type="text" name="search" class="searchbox" />
            <div class="searchbtn">
                <input type="submit" class="button button-primary button-small" value="Go" />
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 4

Views: 1734

Answers (2)

arao6
arao6

Reputation: 3376

After some fiddling, I used a basic table and styled it with CSS instead. It works just how I wanted now. Hope this helps someone! (If anyone wants the underlying Sass script, let me know!)

Fiddle

http://jsfiddle.net/dzoppzzL/

CSS

body {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  font: normal 16px Arial, Helvetica, Verdana, Geneva;
}
body:after {
  content: " ";
  display: block;
  clear: both;
}

.tbnav {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  background: #303030;
  min-height: 65px;
}
.tbnav .logo {
  width: 150px;
  float: left;
  margin-right: 1.26582%;
  margin-left: 3.16456%;
  background: url(/images/tb-logo.gif) no-repeat;
  height: 27px;
  margin-top: 19px;
}
.tbnav .search {
  margin-top: 13px;
  border: 0;
  padding: 0;
  border-spacing: 0;
  border-collapse: collapse;
  margin-left: 3.16456%;
  width: 62.02532%;
  float: left;
  margin-right: 1.26582%;
}
.tbnav .search .searchcat {
  height: 35px;
  padding: 0px;
  border-right: 1px solid #808080;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.tbnav .search .searchcat select {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background: #f7f7f7;
  height: 39px;
  width: 150px;
  color: #808080;
  border: 0;
  outline: none;
  box-shadow: none;
}
.tbnav .search .searchtxt {
  width: 100%;
  padding: 0;
}
.tbnav .search .searchtxt .searchbox {
  border: 1px solid #FFF;
  border-left: 0;
  width: 100%;
  min-width: 200px;
  margin-right: 0;
  margin-left: 0;
  height: 35px;
  padding: 1px;
  padding-left: 5px;
  outline: none;
  box-shadow: none;
}
.tbnav .search .searchbtn {
  width: 100px;
  height: 35px;
  padding-left: 5px;
}
.tbnav .search .searchbtn input {
  height: 39px;
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

HTML

        <table class="search">
            <tr>
                <td class="searchcat">
                    <select name="c" id="catsel">
                        <option>Everything</option>
                    </select>
                </td>
                <td class="searchtxt">
                    <input type="text" name="search" class="searchbox" />
                </td>
                <td class="searchbtn">
                    <input type="submit" class="button button-primary button-small" value="Go" />
                </td>
            </tr>
        </table>

Upvotes: 0

Phil Tune
Phil Tune

Reputation: 3363

Personally, I would do .searchcat { position: absolute; }, set it to the desired width, then set .searchbox { padding-left: /*whatever*/; }. As a quick fix. You might throw some Javascript in there if the <select> contents will be variable (i.e. loaded dynamically) just to check what the widest value is.

Upvotes: 2

Related Questions