How can I create an expanding search box in Bootstrap, Drupal 8?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


How can I create an expanding search box in Bootstrap, Drupal 8?



I'm trying to make my search box expand upon clicking the search icon and submit when clicked again. My search block markup currently looks like this:


<div class="search-block-form contextual-region block block-search block-search-form-block" data-drupal-selector="search-block-form" id="block-mytheme-search" role="search">
<h2 class="visually-hidden">Search</h2>
<div data-contextual-id="block:block=mytheme_search:langcode=en" class="contextual" role="form">
<button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Search configuration options</button>
</div>
<form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8" data-drupal-form-fields="edit-keys">
<div class="form-item js-form-item form-type-search js-form-type-search form-item-keys js-form-item-keys form-no-label form-group">
<label for="edit-keys" class="control-label sr-only">Search</label>
<div class="input-group">
<input title="Enter the terms you wish to search for." data-drupal-selector="edit-keys" class="form-search form-control" placeholder="Search" id="edit-keys" name="keys" value="" size="15" maxlength="128" type="search">

<span class="input-group-btn">
<button type="submit" value="Search" class="button js-form-submit form-submit btn-primary btn icon-only" name="">
<span class="sr-only">Search</span>
<span class="icon glyphicon glyphicon-search" aria-hidden="true"></span></button></span></div>
</div>
<div class="form-actions form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions"></div>
</form>
</div>



I've tried following several css tutorials or looking at other code snippets people have posted, but I get lost when they use javascript or don't use a button. Any help would be greatly appreciated.









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

C# - How to create a semi transparent or blurred backcolor on windows form

Image
Clash Royale CLAN TAG #URR8PPP C# - How to create a semi transparent or blurred backcolor on windows form I am creating a Speed Meter to measure my internet speed and stays at top of every app, then I how do I make Its background semi transparent or blurred something like this. You can make ts semi opaque, however i'm not sure you'll easily be able to blur the background – TheGeneral 6 hours ago thanks ! then how do I make it semi opaque – Arwin Chua 6 hours ago Form.Opacity Property – TheGeneral 6 hours ago See th
Read more

Will Oldham

Image
"Palace Music" redirects here. For the racehorse, see Palace Music (horse). Bonnie 'Prince' Billy Will Oldham, June 6, 2009 Background information Birth name William Oldham Also known as Palace Brothers Palace Music Bonnie 'Prince' Billy Born ( 1970-12-24 ) December 24, 1970 (age 47) Louisville, Kentucky, United States Genres Folk alternative country country freak folk [1] Years active 1993–present Labels Drag City, Domino, Spunk Associated acts Dawn McCarthy, The Cairo Gang, Mekons, Matt Sweeney, Mick Turner, Tortoise, Trembling Bells, Harem Scarem, The Picket Line, Alex Neilson, Björk, Slint Website www.bonnieprincebilly.com Will Oldham (born December 24, 1970), better known by the stage name Bonnie 'Prince' Billy , is an American singer-songwriter and actor. From 1993 to 1997, he performed and recorded under variations of the Palace name, including the Palace Brothers, Palace Songs, and Palace Music. After releasing material under his own name,
Read more

Makefile test if variable is not empty

Makefile test if variable is not empty In a makefile I'm trying to I've created this simplified makefile to demonstrate my problem. Neither make a or make b executes the body of the if, I don't understand why not. make a make b .PHONY: a b a: $(eval MY_VAR = $(shell echo whatever)) @echo MY_VAR is $(MY_VAR) $(info $(MY_VAR)) ifneq ($(strip $(MY_VAR)),) @echo "should be executed" endif @echo done b: $(eval MY_VAR = $(shell echo '')) @echo MY_VAR is $(MY_VAR) $(info $(MY_VAR)) ifneq ($(strip $(MY_VAR)),) @echo "should not be executed" endif @echo done I'm using $ make --version GNU Make 3.81 There are several problems, and misunderstandings. Your MY_VAR is a make variable, set it without a <tab> to its value, and no need to $(eval ...) . MY_VAR:=$(shell echo whatever) is enough. No <tab> before $(info ...) neither, this is make – Zelnes
Read more