Geek Answers Handbook

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

I am trying to attach a dropdown selectto the search box. So far, I have somehow worked on large monitors:

search box

However, the problem is that when I resize the browser window to <1100px, "Everything" is disabled:

search text cut off

I tried to apply min-width, for example. 150px in the drop-down list, but it doesn't seem to have any effect. Adding min-widthto the container works, but when I resize the window, the controls go to the next line. I assume that the approach I used (using a nested 12-column lattice without gutters to align the drop-down menu, text box and button) is not the right way to do this.

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

How can I attach a select dropdown to a text box, but keep a minimum width equivalent to the largest value of the select box (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>
+4
source share
2 answers

Personally, I would do .searchcat { position: absolute; }, set it to the desired width, and then set it .searchbox { padding-left: /*whatever*/; }. How to fix it quickly. You can throw Javascript there if the content <select>is variable (i.e. loaded dynamically) to check that the widest value is.

+2
source

CSS. , . , -! ( - , Sass script, !)

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>
0

More articles:


All Articles