3

The search block using the twitter bootstrap 3 theme doesn't show inline with the rest of the navbar. What is the trick to get this to show inline?

I have tried to add it to the page.tpl.php without success.

Any ideas?

EDIT:::

I've added this to the template:

 <div class="col-md-3 pull-right">
           <?php if (!empty($page['searchblock'])): ?>
            <?php print render($page['searchblock']); ?>
          <?php endif; ?>
          </div>

However, that doesn't seem exactly right for this bootstrap theme. In the bootstrap code one wraps the search like so:

<form class="navbar-form navbar-right" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Do I need to modify the default search block template? Thanks for any help to my ignorance as i learn this system. Really digging Drupal 7 right now!

1

I had the same feature request. In mytheme/template.php I've added

/*
 *  Preprocess page.tpl.php to inject the $search_box variable.
 */
function mytheme_preprocess_page(&$variables){
  $search_form = drupal_get_form('search_form');
  $search_box = drupal_render($search_form);
  $variables['search_box'] = $search_box;
}

/*
 *  Form alter to add missing bootstrap classes and role to search form.
 */
function mytheme_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_form') {
    $form['#attributes']['class'][] = 'navbar-form';
    $form['#attributes']['role'][] = 'search';
  }
}

In mytheme/templates/page.tpl.php I've added

<div class="col-md-3 nav nabvar-nav navbar-right">
  <?php print $search_box; ?>
</div>

After the

<div class="navbar-header"> div.

There still was a problem with a float:left applied to secondary links menu (instead of the proper boostrap navbar-right. So, for a quick workaround, in mytheme/css/style.css I've added:

@media(max-width:768px){
  ul.secondary{
    float:none!important;
  }
}
  • Strange thing about this is when I add anything to my template.php I get a blank page. Am I missing something? – jasonflaherty Feb 18 '15 at 22:12
  • @jasonflaherty I have never had that problem, but I would check a couple of things mentioned in the Blank pages or "white screen of death" (WSOD) page, specifically "Character Encoding on template.php" and the directory (sites/all or sites/default) related issues. – miro marchi Feb 19 '15 at 17:51
0

I'd do something along these lines:

<form class="navbar-form" role="search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search"/>
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <span class="sr-only">Search</span>
        <span class="glyphicon glyphicon-search"aria-hidden="true"></span>
      </button>
    </div>
  </div>
</form>
0

According to your tag, you're looking for a D7 solution. The Drupal 7 page.tpl.php doesn't have the $search_box variable anymore. However you can add it in a preprocess function in your template.php:

<?php
/*
 *  Preprocess page.tpl.php to inject the $search_box variable back into D7.
 */
function MYTHEME_preprocess_page(&$variables){
  $search_box = drupal_render(drupal_get_form('search_form'));
  $variables['search_box'] = $search_box;
}

Then you just need to print the variable in your page.tpl.php:

<?php print $search_box; ?>

You could also use module_invoke, but you shouldn't have php logic in template files:

<?php
  $block = module_invoke('search', 'block_view', 'search');
  print render($block); 
?>

Answer originally posted https://drupal.stackexchange.com/a/10288

0

According to the bootstrap module page about this issue ( search block in navbar strange behaviour ), the best solution to date is the following css rule :

#search-block-form .input-group-btn {
  width: auto;
}
0

Here's how I did it following the comment of Chris Godwin in page.tpl.php:

<?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
  <div class="navbar-collapse collapse">
    <nav role="navigation">
      <?php if (!empty($primary_nav)): ?>
        <?php print render($primary_nav); ?>
      <?php endif; ?>
        <div class="col-md-3 nav nabvar-nav navbar-right">
            <?php print $search_box; ?>
        </div>
      <?php if (!empty($page['navigation'])): ?>
        <?php print render($page['navigation']); ?>
      <?php endif; ?>
    </nav>
  </div>
<?php endif; ?>

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.