Search widgets and sizing

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
trista13's picture

I have several search boxes on my website that are from outside vendors. The vendors have websites where you can "create" your search widget with the parameters you want and then it spits out HTML code for you to put on your website. This code uses set pixels for size. I'm running into the problem of having the search boxes go beyond their block boundaries depending on the size of the screen the site is being viewed on. I've messed around with the code, trying to get them to be more flexible, but have had no luck. I'd like for these things to stay within their blocks (the blocks seems to resize). Does anyone have any tips for this? Is this a theme problem or just an HTML problem?

Any and all help is greatly appreciate!

Comments

Say No to Tables

scottrouse's picture

Trista,

Many times companies that give a "code snippet" for posting on another site wrap images or form elements in HTML tables in order to control the layout (or just as a throwback to the late 1990s, maybe). Either way, HTML tables should never be used to control the layout (positioning and look) of elements on a site. One reason is that those elements don't tend to scale well.

Because your site has a fluid layout (width of elements scale as browser width changes) the ability of those form elements to scale is extremely important.

Let's take your first "Search the Catalog" form on your site. The original code is:

<form id="Entry" target="_top" action="http://mtscprod.msl.mt.gov/uhtbin/cgisirsi/x/0/0/5" enctype="application/x-www-form-urlencoded" method="post" name="Entry">
  <table cellspacing="2" cellpadding="2" bordercolor="white" border="0" bgcolor="white" align="right">
    <tbody>
      <tr>
        <td>
          <div>
            <img width="24" height="18"" src="http://s248024256.onlinehome.us/images/mag.png">
            <span style="font-size:18px; ">Search the Catalog</span>
          </div>
        </td>
      </tr>
      <tr>
        <td nowrap="nowrap" colspan="2">
          <input class="searchbox" type="text" style="background-repeat: no-repeat" value="" size="27" name="searchdata1" maxlength="255">
          <br>
          <br>
          <div>
            <select name="srchfield1">
              <option value="GENERAL">Words or Phrase</option>
              <option value="AU">Author</option>
              <option value="TI">Title</option>
              <option value="SU">Subject</option>
              <option value="SER">Series</option>
              <option value="PER">Periodical Title</option>
            </select>
            <input class="gobutton" type="submit" value="Search">
            <br>
            <input type="hidden" value="ANY" name="item_type">
            <input type="hidden" value="KEYWORD" name="match_on">
            <input type="hidden" value="-PBYR" name="sort_by">
            <input type="hidden" value="BITTERROOTWEB" name="user_id">
            <input type="hidden" value="" name="password">
            <input type="hidden" value="MSCPARTNER" name="library">
            <input type="hidden" value="ENGLISH" name="language">
          </div>
        </td>
      </tr>
      </tbody>
    </table>
</form>
<br>
<br>
<a href="http://mtscprod.msl.mt.gov/uhtbin/cgisirsi/x/0/0/60/1173/X?user_id=BITTERROOTWEB&password">Advanced Search</a>

(Also located at http://pastebin.com/DYMhEPjw for your reference.)

The first thing I'd do is remove all the table code from that. Now we're left with something like:

<form id="Entry" target="_top" action="http://mtscprod.msl.mt.gov/uhtbin/cgisirsi/x/0/0/5" enctype="application/x-www-form-urlencoded" method="post" name="Entry">
  <div>
    <img width="24" height="18"" src="http://s248024256.onlinehome.us/images/mag.png">
    <span style="font-size:18px; ">Search the Catalog</span>
  </div>
  <input class="searchbox" type="text" style="background-repeat: no-repeat" value="" size="27" name="searchdata1" maxlength="255">
  <br>
  <br>
  <div>
    <select name="srchfield1">
      <option value="GENERAL">Words or Phrase</option>
      <option value="AU">Author</option>
      <option value="TI">Title</option>
      <option value="SU">Subject</option>
      <option value="SER">Series</option>
      <option value="PER">Periodical Title</option>
    </select>
    <input class="gobutton" type="submit" value="Search">
    <br>
    <input type="hidden" value="ANY" name="item_type">
    <input type="hidden" value="KEYWORD" name="match_on">
    <input type="hidden" value="-PBYR" name="sort_by">
    <input type="hidden" value="BITTERROOTWEB" name="user_id">
    <input type="hidden" value="" name="password">
    <input type="hidden" value="MSCPARTNER" name="library">
    <input type="hidden" value="ENGLISH" name="language">
  </div>
</form>
<br>
<br>
<a href="http://mtscprod.msl.mt.gov/uhtbin/cgisirsi/x/0/0/60/1173/X?user_id=BITTERROOTWEB&password">Advanced Search</a>

(Also at http://pastebin.com/vBD2CH3G.)

Test the scaling of the elements now. If they require further tweaking, you could add something like this to your CSS:

#Entry input.searchbox {
  max-width: 100%;
}

Let me know if that gets you anywhere and if you need additional help with the other forms on the site.

-Scott

Libraries

Group organizers

Group categories

Resources

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: