4

I want to theme the default search block to a bootstrap search bar.

When I create the searchbar in html it looks like:

<div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div>

I tried already changing the input--search.html.twig file to:

{% set classes = ['form-control',] %}

 <input {{ attributes.addClass(classes).setAttribute('placeholder', 'Search for...').setAttribute('type', 'text') }} />{{ children }}

and block--search-form-block.html.twig to:

<div class="input-group">
{{ content }}

                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div>

But nothing does change the layout as expected. Is there some easy way to change the layout of the default search block?

3

Found a dirty way to fix my problem. Because Drupal 8 creates the search form on a special way, I changed my form.html.twig manually.

{% if element['#form_id'] == 'search_block_form' %}

  <form action="{{element['#action']}}" method="get" id="search-block-form" accept-charset="UTF-8" data-drupal-form-fields="edit-keys">
    <div class="input-group">
      <input title="Enter the terms you wish to search for." data-drupal-selector="edit-keys" type="text" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search form-control" placeholder="Search for...">
      </input>
      <span class="input-group-btn">
        <input data-drupal-selector="edit-submit" type="submit" id="edit-submit" value="Search" class="btn btn-default js-form-submit submit-button">
        </input>
      </span>
    </div>
  </form>
{% else %}

  <form{{ attributes }}>
    {{ children }}
  </form>

{% endif %}
  • What could be the right way in case my team don't want dirty way.? – siddiq Nov 24 '17 at 2:55

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