Drupal 7: Views exposed form layout module

David G - DrupalRecently I wanted to take a Views Exposed Filter and theme it up to look nice! … and I didn’t want to do a ton of work. So I wanted to see if there were any modules that could help me to make better use of Bootstrap or AdaptiveTheme grids in my exposed filter block. I stumbled across the Views Exposed Form Layout module.

What is Views Exposed Form Layout

From a mile high description the project page states:

  • Provides Default and supports Panels and Display suite layouts.
  • You can define custom layouts with regions.
  • You can override exposed form template as usual.
  • Added `views-exposed-widget` and `views-exposed-widget–field-name` templates.
  • Supports Better exposed filters module.

And they provide a contrived example of VEFL in action:

Example Views Exposed Form Layout from project page.

Example Views Exposed Form Layout from project page.

I had hoped that straight outta the box I could create a form so complicated as this easily, but I believe I found that depending on your active Drupal theme the theme CSS may affect VEFL visual appearance. So I suggest you attack themeing the exposed form incrementally. I used VEFL to allow me to set filters into specific divs so that I could adjust the visual display with specific CSS. So I’m saying — use VEFL to help layout your exposed form, but tidy up its appearance with CSS.

An Example of My Own Usage of Views Exposed Form Layout

So on a website I want to show a number of filter widgets for a Views form to search Documents on a site.

Example search fields for exposed form: body, and 2 date fields.

Example search fields for exposed form: body, and 2 date fields.

In the long run I may show 6-10 fields on the Search page, but I was setting up an example of what the search form could show for documents so I wanted full-text search and some date range in the filter. I may add Speaker filters, Location filters, Topic filters … But 3 is a good start.

I then wanted to show the form with items: full-text input, date 1, date 2, Submit and Reset as a layout similar to:

[   enter keywords  ]
[date1]       [date2]
     [Submit] [Reset]

Out of the box, with basic Drupal 7 exposed filter block this is … difficult. So you can with relative ease using VEFL configure this kind of nesting for search elements. By going to Advanced -> Exposed Form Style: Settings you can select the type of layout for the exposed form and drop fields into specific regions of the layout:

Example of using a Brick based layout to place search fields into columns and rows.

Example of using a Brick based layout to place search fields into columns and rows.

So I want to stress, if you goto your search form page now. It may look ugly. Here is an example of some uglieness. This is because boostrap and the theme developed so far has CSS that is forcing certain field elements to be a certain size and it overflows the parent block div.

This is an example of no themeing of the generated VEFL search form, which has some conflicts with the existing site css.

This is an example of no themeing of the generated VEFL search form, which has some conflicts with the existing site css.

But, the good news is that you can write some (simple) CSS to target and fix this sizing issues, and VEFL has provided the layout or structure of the exposed form HTML to allow for this structuring of the search form.

So we supply a bit of cleanup CSS:

/* Solr search page themeing */
body.page-advanced-search .views-exposed-form input.form-text {
  width: 6em;
}
body.page-advanced-search .views-exposed-form input.form-text:first-child {
  width: 12em;
}
div.vefl-region .views-widget-items-per-page { width: 12em; }
#edit-search-api-views-fulltext-wrapper div.description {
  color: #777777; width: 12em;
}
label[for=edit-field-docs-start-date-time-value-datepicker-popup-1],
label[for=edit-field-docs-start-date-time-value-1-datepicker-popup-1] {
  display: none;
}

And arrive at a search form we can use for now:

Our final themed search page with exposed filter block using VEFL module.

Our final themed search page with exposed filter block using VEFL module.

Hopefully you can see the benifits the Views Exposed Form Layout module gives you speeding up site development and Views filters!

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *