web-dev-qa-db-fra.com

Ajout d'un bloc de recherche à Bootstrap 3 Navbar

Le bloc de recherche utilisant Twitter thème bootstrap ne s'affiche pas en ligne avec le reste de la barre de navigation. Quelle est l'astuce pour que cela s'affiche en ligne?

J'ai essayé de l'ajouter à la page.tpl.php sans succès.

Des idées?

ÉDITER:::

J'ai ajouté ceci au modèle:

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

Cependant, cela ne semble pas exactement correct pour ce thème bootstrap. Dans le code bootstrap on encapsule la recherche comme suit:

<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>

Dois-je modifier le modèle de bloc de recherche par défaut? Merci pour toute aide à mon ignorance lorsque j'apprends ce système. Vraiment creuser Drupal 7 en ce moment!

themingblockssearch
3
jasonflaherty

J'ai eu la même demande de fonctionnalité. Dans mytheme/template.php J'ai ajouté

/*
 *  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';
  }
}

Dans mytheme/templates/page.tpl.php J'ai ajouté

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

Après le

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

Il y avait toujours un problème avec un flotteur: la gauche appliquée au menu des liens secondaires (au lieu de la bonne barre de navigation boostrap-droite. Donc, pour une solution rapide, dans mytheme/css/style.css J'ai ajouté:

@media(max-width:768px){
  ul.secondary{
    float:none!important;
  }
}
1
miro marchi

Selon votre tag, vous recherchez une solution D7. La Drupal 7 page.tpl.php n'a plus la variable $ search_box. Cependant vous pouvez l'ajouter dans une fonction de prétraitement dans votre 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;
}

Ensuite, il vous suffit d'imprimer la variable dans votre page.tpl.php:

<?php print $search_box; ?>

Vous pouvez également utiliser module_invoke, mais vous ne devriez pas avoir de logique php dans les fichiers de modèle:

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

Réponse publiée à l'origine https://drupal.stackexchange.com/a/10288

0
Chris Godwin

Je ferais quelque chose dans ce sens:

<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
Lambda

Voici comment je l'ai fait suite au commentaire de Chris Godwin dans 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; ?>
0
Carlos

Selon la page du module bootstrap sur ce problème ( bloc de recherche dans le comportement étrange de la barre de navigation ), la meilleure solution à ce jour est la règle css suivante:

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