6

I am guessing this is a easy question, but I am stumped for a couple of hours.
I am using Views with some exposed filters as shown below.

  • Search keyword
  • Drawing Type
  • Type of Mould
  • Customer Name

    screenshot

They are all in one line where "Customer Name" and the "apply" button are wrapped onto the next line.
How do I make "Search keywords" in one line, then "Drawing Type" + "Type of Mould" + "Customer Name" on another line, and "Apply" button alone on the last line?

  • I cleared the cache as suggested above but still no change in formatting. My view is called "drawingsearch" and when I look under the tab theme -> information, I do not see the file views-exposed-form.tpl.php being accessed anywhere there. I would assume it should be listed there somewhere ... maybe under "display output"? – user1152 May 3 '11 at 0:05
5

Views 3 for Drupal 7 kindly gives each exposed widget DIV a class with a unique name. Then it's a matter of adding clear and float attributes.

If you're using Views 2 you will have to override the views-exposed-form.tpl.php file in the views/theme folder. You can just copy and save this code in a file called views-exposed-form.tpl.php in your theme file path. It should override the original template file.

<?php
// $Id: views-exposed-form.tpl.php,v 1.4.4.1 2009/11/18 20:37:58 merlinofchaos Exp $
/**
 * @file views-exposed-form.tpl.php
 *
 * This template handles the layout of the views exposed filter form.
 *
 * Variables available:
 * - $widgets: An array of exposed form widgets. Each widget contains:
 * - $widget->label: The visible label to print. May be optional.
 * - $widget->operator: The operator for the widget. May be optional.
 * - $widget->widget: The widget itself.
 * - $button: The submit button for the form.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($q)): ?>
  <?php
    // This ensures that, if clean URLs are off, the 'q' is added first so that
    // it shows up first in the URL.
    print $q;
  ?>
<?php endif; ?>
<div class="views-exposed-form">
  <div class="views-exposed-widgets clear-block">
    <?php foreach($widgets as $id => $widget): ?>
      <div class="views-exposed-widget views-widget-<?php print $id ?>">
        <?php if (!empty($widget->label)): ?>
          <label for="<?php print $widget->id; ?>">
            <?php print $widget->label; ?>
          </label>
        <?php endif; ?>
        <?php if (!empty($widget->operator)): ?>
          <div class="views-operator">
            <?php print $widget->operator; ?>
          </div>
        <?php endif; ?>
        <div class="views-widget">
          <?php print $widget->widget; ?>
        </div>
      </div>
    <?php endforeach; ?>
    <div class="views-exposed-widget">
      <?php print $button ?>
    </div>
  </div>
</div>
|improve this answer|||||
  • Thank you Adam S for the reply. I tried your suggestion but did not see any changes. I am using Drupal 6.x and Views 2.3. I replaced my existing views-exposed-form.tpl.php file with your updated code above. In views I went to information - rescan template files. Nothing changed. As added measure I restarted the drupal server and still no change. Am I missing or doing something wrong? – user1144 May 2 '11 at 1:27
  • I just tested it and it works great. Make sure to clear the cache not restart the Drupal server. It's under admin/settings/performance . Also, you can wrap the div in markup if you need to for the image. – Adam S May 2 '11 at 2:55
  • A slight correction on endless summer's post: That should be <div class="views-exposed-widget views-widget-<?php print $widget->id ?>">. (Note the use of $widget->id rather than $id.) – user2232 Jul 30 '11 at 22:59
0

After saving the above code as a template override in my theme folder I modified it to ensure all form elements and their "wrapper" DIVs have unique id="" attributes.

In my case, I was outputting the same view twice on a page. One Mobile (field list) version and one Desktop (table) (for responsive website layout). The original code didn't pass Web Accessibility Standards (Double A) - yaaawn!!

foreach ($widgets as $id => $widget):
  $id_attr = drupal_html_id($widget->id);
  ?>
  <div id="<?php print $id_attr; ?>-wrapper" class="views-exposed-widget views-widget-<?php print $id; ?>">
    <?php if (!empty($widget->label)): ?>
      <label for="<?php print $id_attr; ?>">
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.