A scrollable Google search help window is a simple box with horizontal scroll overflow (rather than paginated). The scrolling part of this sentence window can be easily implemented using two nested div containers with an outer div with overflow-x: auto style and an inner div in white-space: nowrap , as shown in this example:
<div style="overflow-x: auto"> <div style="white-space: nowrap"> <template is="dom-repeat" items="[[suggestions]]"> ... </template> </div> </div>
overflow-x: auto tells the browser to display the scroll bar and crop the overflow contents when overflowing along the edges.
white-space: nowrap disables the packing of elements when the line overflows, so that the elements remain on the same line.
window.addEventListener('WebComponentsReady', () => { class XFoo extends Polymer.Element { static get is() { return 'x-foo'; } static get properties() { return { suggestions: { value: () => [ {title: 'polymer gestures', url: 'https://www.google.com/search?q=polymer+gestures'}, {title: 'polymer elements', url: 'https://www.google.com/search?q=polymer+elements'} ] } }; } } customElements.define(XFoo.is, XFoo); customElements.define('x-suggestions', class extends Polymer.Element { static get is() { return 'x-suggestions' } static get properties() { return { suggestions: Array }; } _onClickFeedback() { console.log('feedback'); } _onClickClose() { this.dispatchEvent(new CustomEvent('close', {detail: {el: this}})); } }); });
html { font-family: Roboto, Arial, Helvetica, sans-serif; }
<head> <base href="https://polygit.org/polymer+v2.3.1/components/"> <script src="webcomponentsjs/webcomponents-loader.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-icons/iron-icons.html"> <link rel="import" href="iron-icon/iron-icon.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <style> x-suggestions { width: 350px; } </style> <x-suggestions suggestions="[[suggestions]]"></x-suggestions> </template> </dom-module> <dom-module id="x-suggestions"> <template> <style> :host { display: block; background: #f8f8f8; color: #6a6a6a; padding-bottom: 1rem; } .title { margin: 0; padding: 1rem 1rem 1rem 1.3rem; } .feedback { text-decoration: none; font-style: italic; color: #6a6a6a; margin: 1rem; } .suggestion { text-decoration: none; font-weight: bold; color: black; } .suggestions-outer { overflow-x: auto; } .suggestions-inner { white-space: nowrap; } .suggestion-box { display: inline-flex; margin: 0.2rem; padding: 1em 1em 1em 0.5em; border: solid 1px #ddd; border-radius: 2px; } .header { display: flex; border-top: solid 2px #e9e9e9; } .close-btn { background: transparent; border: none; margin: 10px 10px 10px auto; font-size: 1rem; color: #6a6a6a; cursor: pointer; } .icon-search { color: #717171; --iron-icon-height: 28px; --iron-icon-width: 28px; } </style> <header class="header"> <h3 class="title">People also search for</h3> <button class="close-btn" title$="Close" on-click="_onClickClose">✕</button> </header> <div class="suggestions-outer"> <div class="suggestions-inner"> <template is="dom-repeat" items="[[suggestions]]"> <div class="suggestion-box"> <a class="suggestion" target$="_blank" href$="[[item.url]]"> <iron-icon class="icon-search" icon="search"></iron-icon> <span>[[item.title]]</span> </a> </div> </template> <a href="#" class="feedback" on-click="_onClickFeedback">Feedback</a> </div> </div> </template> </dom-module> </body>
demonstration