From 0d54936b6ac13178256806e5737d34e9c31da4a9 Mon Sep 17 00:00:00 2001
From: Ronny Roeller <ronny@collaborne.com>
Date: Wed, 23 Aug 2017 16:05:47 +0200
Subject: [PATCH] Bugfix: ensure search-bar keeps its height

Adding a search-bar to a flex layout (e.g. search bar on top, iron-list below) squeezed the search-bar below its configured height. This was due to :host being styled with --layout-horizontal.
---
 paper-search-bar.html | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/paper-search-bar.html b/paper-search-bar.html
index cb73a4b..864dc86 100644
--- a/paper-search-bar.html
+++ b/paper-search-bar.html
@@ -20,6 +20,10 @@
 	<template>
 		<style>
 			:host {
+				display: block;
+			}
+
+			.horizontal-holder {
 				background: var(--background-color, white);
 				display: block;
 				padding: 0 16px;
@@ -73,21 +77,23 @@
 			}
 		</style>
 
-		<iron-icon icon="[[icon]]" class="icon"></iron-icon>
-		<iron-input bind-value="{{query}}">
-			<!-- Define is="iron-input" for backwards compatibility with Polymer 1.x -->
-			<input id="input" is="iron-input" placeholder="[[placeholder]]" value="{{value::input}}"></input>
-		</iron-input>
-
-		<template is="dom-if" if="{{query}}">
-			<paper-icon-button icon="clear" on-tap="_clear" class="icon"></paper-icon-button>
-		</template>
-		<template is="dom-if" if="{{!hideFilterButton}}">
-			<template is="dom-if" if="{{!disableFilterButton}}">
-				<paper-icon-button id="filter" icon="image:tune" on-tap="_filter" class="icon"></paper-icon-button>
+		<div class="horizontal-holder">
+			<iron-icon icon="[[icon]]" class="icon"></iron-icon>
+			<iron-input bind-value="{{query}}">
+				<!-- Define is="iron-input" for backwards compatibility with Polymer 1.x -->
+				<input id="input" is="iron-input" placeholder="[[placeholder]]" value="{{value::input}}"></input>
+			</iron-input>
+
+			<template is="dom-if" if="{{query}}">
+				<paper-icon-button icon="clear" on-tap="_clear" class="icon"></paper-icon-button>
+			</template>
+			<template is="dom-if" if="{{!hideFilterButton}}">
+				<template is="dom-if" if="{{!disableFilterButton}}">
+					<paper-icon-button id="filter" icon="image:tune" on-tap="_filter" class="icon"></paper-icon-button>
+				</template>
+				<paper-badge for="filter" label="[[nrSelectedFilters]]" class="badge" invisible$="[[!nrSelectedFilters]]"></paper-badge>
 			</template>
-			<paper-badge for="filter" label="[[nrSelectedFilters]]" class="badge" invisible$="[[!nrSelectedFilters]]"></paper-badge>
-		</template>
+		</div>
 	</template>
 </dom-module>