Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Adapting a Fixed-Width Search Form to Flex with its Container

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:03
    Adapting a Fixed-width Search Form to Flex with its Container
  • 0:05
    with Amber Himes Matz
  • 0:08
    Our search form was originally
  • 0:10
    built with a static layout and absolute positioning in mind.
  • 0:13
    Since we've moved our search to the sidebar-- a region
  • 0:16
    with a fluid percentage-based width--
  • 0:18
    our meticulously measured search form and its elements
  • 0:21
    are getting swallowed up by the sidebar when it gets too narrow.
  • 0:25
    In this lesson we'll refactor the styles of our search form
  • 0:29
    and convert our static widths, paddings

Adapting a Fixed-Width Search Form to Flex with Its Container


In the original theme, the width, margin, and padding of the elements that make up the search component are set using pixels. Since the width is static, it's breaking out of the sidebar region when the screen size is small enough. 

In this lesson, we'll refactor the styles in the search form so that it flexes with its parent container, instead of breaking it. In working through this example, you'll learn the merits of keeping components flexible and respectful of their parent containers.

Log in or sign up to download companion files.
Additional resources: (checkout branch 12-search-form)