The section in the image that says People also search for, there is a horizontal list of items which is scrollable. I've to do the same thing using polymer, but can't find anything similar to it. I've already implemented vertical lists, but not sure about the horizontal ones.
Another question is that would it possible to use a viewpager like component for this kind of scenario? Paper-Tabs do provi this functionality, however swipe gesture does not work on it. Pages change only if we click a tab.
The scrollable suggestion box in Google search is a simple box with horizontal scroll overflow (and not paginated like in a tab view). The scrolling part of that suggestion box could be easily implemented with two nested div containers, with the outer div styled with overflow-x: auto and the inner div styled with 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 render a scrollbar and clip the overflow content when it overflows at the edges.
white-space: nowrap disables wrapping of elements when line overflow occurs 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>
Feedback
</div>
</div>
</template>
</dom-module>
</body>
demo
Related
I have looked at some other posts and all I could find was answers using javascript. Is there some way that I hover over an element on top of another element but the element at the bottom won't change its style? By the way, I only want to use vanilla HTML and CSS, no javascript. In this example, the goal is to hover over blabla or blablabla without adding a border to the navigation bar.
HTML
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
<div class="navBarChild">
Notepad
Help
</div>
</div>
CSS
.navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
.navBar:hover{
border: 2px solid black;
}
h3{
z-index: 2;
}
body{
background:url("...") left / cover no-repeat;
}
.navBarChild{
display: flex;
flex-direction: row;
position: relative;left: 290px;top: 17px;
}
#linkBla{
font-weight: bold;
text-decoration: none;
font-size: 26px;
font-family: monospace;
color: black;
}
#linkBla:hover{
color: orangered;
}
#linkBlaBla{
position: relative;left: 50px;
font-weight: bold;
text-decoration: none;
font-size: 26px;
font-family: monospace;
color: black;
}
#linkBlaBla:hover{
color: orangered;
}
Add a new 'navBarContainer'
Try bringing the 'navBarChild' out of the 'navBar' like this:
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<div class="navBarChild">
Notepad
Help
</div>
Make a whole new 'navBarContainer' for the both of them
<div class="navBarContainer">
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<div class="navBarChild">
Notepad
Help
</div>
</div>
Set the '.navBarContainer' in your css to 'position: relative;'
position: relative;
Set the 'navBarChild' to
position: absolute;
display: flex; //to keep the a-links together
and then you can position it to your desire
top: 0; //important
left: 75%;
height: 100%;
At this point there should be no need for the z-index
Lastly
Add a little padding to the #linkBla and #linkBlaBla and set the display to 'flexbox'
#linkBla, #linkBlaBla {
padding: 40%;
display: flexbox;
}
Checkout the whole thing in this pen https://codepen.io/emekaorji/pen/mdOMMRr
I don't believe this is possible without javascript, but you can put the script inside of the HTML like so:
<html>
<body>
...
<script>
function removeOutline() {
document.getElementsByClassName("navBar")[0].style.border = "2px solid transparent";
}
function addOutline() {
document.getElementsByClassName("navBar")[0].style.border = "2px solid black";
}
</script>
</body>
</html>
and use it like:
<div class="navBarChild" onmouseover="removeOutline()" onmouseout="addOutline()">
CSS does not allow you to change elements above the current element. In other words, you can't change the parent element based on the child element (the reverse works by using child selectors).
I'm trying to get a better understanding of using mixins in Polymer 2: Here is my sample:
<dom-module id="x-test">
<template>
<custom-style>
<style is="custom-style">
html {
--center-on-screen: {
left: 50%;
top: 50%;
position: absolute;
border: solid 1px red;
};
}
</style>
</custom-style>
<style>
.signal {
border-radius: 30px;
height: 30px;
width: 30px;
#apply --center-on-screen;
}
</style>
<div class="signal"></div>
</template>
<script>
'use strict'
class XTest extends Polymer.Element {
static get is() {
return 'x-test';
}
static get properties() {
return {
}
}
static get observers() {
return [];
}
constructor() {
super();
}
ready() {
super.ready();
}
connectedCallback() {
super.connectedCallback();
}
connectedCallback() {
super.connectedCallback();
}
}
customElements.define(XTest.is, XTest);
</script>
</dom-module>
when the code #apply --center-on-screen; in the class, I would expect the div to have the color red and be centered on the screen. I have verified it because I had all the code in --center-on-screen in the class .signal. I moved it into --center-on-screen just for testing purposes. If anyone can advise me on what i'm doing incorrectly.
**Update **
When I move --center-on-screen into :host then it works. So it looks like this
<style>
:host {
--center-on-screen: {
left: 50%;
top: 50%;
position: absolute;
border: solid 1px red;
}
}
.signal {
border-radius: 30px;
height: 30px;
width: 30px;
border: solid 1px red;
#apply --center-on-screen;
}
</style>
Try to include cd shady css mixin:
<link rel="import" href="../../bower_components/shadycss/apply-shim.html">
CSS custom properties are becoming widely supported, CSS mixins remain a proposal. So support for CSS mixins has been moved to a separate shim that is optional for 2.0 class-style elements. For backwards compatibility, the polymer.html import includes the CSS mixin shim. Class-style elements must explicitly import the mixin shim.
Ref: https://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim
Thanks for posting this query. I was searching some credible resource on how to use css mixins in polymer 2.0 .
I had this mixin -
--calendarbox-mixin: {
display:flex;
position:relative;
flex-direction: column;
border-radius: 5px;
--webkit-border-radius:5px;
--moz-border-radius:5px;
width:11vw;
margin:10px 5px;
text-align: center;
height:18vh;
justify-content: space-around;
}
I tried adding it just abover another class where I wanted to use the mixin -
.dayfare_box {
#apply(--calendarbox-mixin);
background: #fbfcfc;
border:2px solid #e2e2e2;
}
The output came without the mixin applied. Tried adding in :host and it worked!!
Just stumbled upon this link and it confirmed my doubt whether I was doing it right. Thanks for posting :)
Screenshot of the issue
How do you change colour of -webkit-appearance -moz-window-button-close? As you can see in the image at the moment it's blue and I want to be able to change the colour to the brown that the rest of the textbox uses.
I've set the background-color, color and hyperlink styles but none of it affected the X icon in the right of the text box.
I've searched around a lot but I haven't found a solution, maybe I'm just not using the right keywords.
Any help is very much appreciated.
You could try: Add-webkit-appearance: none; to input[type=search]::-webkit-search-cancel-button and style using an image. Please refer to CodePen for an example - Codepen image
Okay, so it took me a long time to figure this out. Essentially there is only a single resource that I found which would allow this to work. However, the author states that fewer and fewer browsers are supporting it.
Lesson to be learned - Don't bother using WebKit for trying to add icons inside. Just build it up yourself with HTML, CSS, and jQuery (or alternatives).
I took a different approach which, although involves jQuery, seems to work fine. I built up a span to give the same appearance, used jQuery to control the visibility and display properties, font-awesome for the search icon and CSS gave the initial display and visibility settings:
function searchIconClicked() {
if ($("#searchBorderbox").css('display') == "none") {
$("#searchIcon").css("visibility", "hidden");
$("#searchBorderbox").css("display", "inline");
$('#searchBorderbox').css("visibility", "visible");
$('#searchBorderbox').animate({
"width": 440
});
$('#searchBorderbox').promise().done(function() {
$('#clearSearchTextboxIcon').css('display', 'inline');
$("#searchIcon").css("visibility", "visible");
});
}
}
function clearSearchTextbox() {
$("#searchTextbox").val('');
}
$(document).ready(function() {
$("#searchIcon").on('click', searchIconClicked)
$("#clearSearchTextboxIcon").on('click', clearSearchTextbox)
$('#searchTextbox').keyup(function() {
if ($(this).val().length != 0) {
$('#clearSearchTextboxIcon').css('visibility', 'visible');
} else {
$('#clearSearchTextboxIcon').css('visibility', 'hidden');
}
})
});
body {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.42857143;
background-color: #023930;
}
#quoteBox {
margin-top: 45%;
margin-bottom: 45%;
}
#quoteBoxText {
text-align: center;
padding-top: 1%;
padding-bottom: 1%;
max-width: 100%;
}
.brownBorder {
color: #855F1C !important;
}
.searchSpanBox {
display: none;
width: 0%;
border-radius: 25px;
border: 5px solid #855F1C !important;
background-color: #023930;
border-spacing: 25px;
box-sizing: border-box;
}
.searchTextbox {
background-color: #023930;
width: 0%;
padding-left: 10px;
width: 380px;
border: 0;
color: #FFFFFF;
border-radius: 25px;
outline: none;
}
#clearSearchTextboxIcon {
display: none;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="main col-xs-12" id="quoteBox">
<div id="quoteBoxText">
<h1><span id="searchBorderbox" class="brownBorder searchSpanBox"><input type="search" id="searchTextbox" class="searchTextbox"><a id="clearSearchTextboxIcon">✖</a></span> <i id="searchIcon" class="fa fa-search fa-lg brownBorder" aria-hidden="true"></i></h1>
</div>
</div>
</div>
Today, while playing with new angular I faced problem as attached:
The "tags" are expanding throughout the parent container (the white div). They wrap, but badly, as you see.
I would like them to do not break in the middle of the word, but in this case the "software engineering" should be entirely in the second row.
The tags are encapsulated in div as follows:
<div class="menu-block">
<div class="menu-header">
<strong>» Tags</strong>
</div>
<div class="menu-content tags">
<tags></tags>
</div>
</div>
And the appropriate CSS classes:
.menu-block {
border-bottom: 1px solid #eeeeee;
padding: 1.2em;
border-left: 1px solid #eeeeee;
background-color: #fcfcfc;
}
.menu-block .menu-header {
margin-bottom: 1em;
font-size: 14pt;
}
.menu-block .menu-content {
font-size: 11pt;
/* See the specifications below */
}
.menu-block .tags {
font-size: 11pt;
line-height: 2.2em;
}
The .menu-block element is also encapsulated in bootstrap .col-4.
And the last thing: angular component (I think annotation is enough here):
#Component({
selector: 'tags',
template: `
<a *ngFor="let tagFeed of tagFeeds" class="tag" href="/tag/{{tagFeed.id}}">{{tagFeed.id}}</a>
`,
})
change in css
.tag {
display: inline-block;
white-space: nowrap;
word-wrap: break-word;
}
online demo http://codepen.io/tieppt/pen/WRyMVZ
I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.
How can I apply specific CSS to the title and the content respectively?
$("#poplink").popover({
html: true,
placement: "right",
trigger: "hover",
title: function () {
return $(".pop-title").html();
},
content: function () {
return $(".pop-content").html();
}
});
html, body {
width: 100%;
height: 100%;
}
.pop-div {
font-size: 13px;
margin-top: 100px;
}
.pop-title {
display: none;
color: blue;
font-size: 15px;
}
.pop-content {
display: none;
color: red;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
<a id="poplink" href="javascript:void(0);">Pop</a>
<div class="pop-title">Title here</div>
<div class="pop-content">Content here</div>
</div>
For example: http://jsfiddle.net/Mx4Ez/
The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.
Try adding this to your css:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
Update
Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-header and .popover-body instead.
If you have multiple popovers on your page and only want to style one of them, you can leverage the popover's template option to add another class:
$("#myElement").popover({
template: '<div class="popover my-specific-popover" role="tooltip">...'
});
I started by just using the default value for template from the docs, and added my-specific-popover to the class attribute.
The newly created elements have the following hierarchy:
.popover
|_ .popover-title
|_ .popover-content
Which is injected after the element that triggers the popover (you can specify a specific container for the injected popover by setting the container option, in which case you will set the styles using the element that you passed as container). So to style a popover you can use css like the following example:
<div id="my-container">
Popover This!
</div>
<style>
.popover-title { color: green; } /* default title color for all popovers */
#my-container .popover-title { color: red; } /* specific popover title color */
</style>
As Matt said before, it may depend on the bootstraps version, for v4.6 you should do:
.popover{
background-color: red;
}
.popover-header {
color: red;
}
.popover-body {
color: blue;
}
Bootstrap >= 5.0
You can override Bootstrap popover styles.
.popover {
background-color: var(--main-bg-color);
border: 1px solid var(--border-color);
}
.popover-body {
color: var(--font-color);
}
.bs-popover-top {
> .popover-arrow {
&::before {
border-top-color: var(--border-color);
}
&::after {
border-top-color: var(--main-bg-color);
}
}
}
.bs-popover-end {
> .popover-arrow {
&::before {
border-right-color: var(--border-color);
}
&::after {
border-right-color: var(--main-bg-color);
}
}
}
.bs-popover-bottom {
> .popover-arrow {
&::before {
border-bottom-color: var(--border-color);
}
&::after {
border-bottom-color: var(--main-bg-color);
}
}
}
.bs-popover-start {
> .popover-arrow {
&::before {
border-left-color: var(--border-color);
}
&::after {
border-left-color: var(--main-bg-color);
}
}
}
And replace --main-bg-color, --border-color, and --font-color with yours.