Using Polymer 1.1, I want to make the drop shadow permanent on paper-header-panel....even if I am not scrolling. But right now, I can not style the shadow at all. This style I applied when scrolling doesn't take effect. It should be quit noticable at 100px:
<style is="custom-style">
paper-header-panel {
--paper-header-panel-shadow: {
box-shadow: inset 100px 100px 100px 100px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body class="fullbleed layout vertical">
<paper-header-panel mode="waterfall-tall" class="flex">
<paper-toolbar>
<div class='title'></div>
<paper-tabs>
<paper-tab>
<div>contact</div>
</paper-tab>
</paper-tabs>
<div class='title bottom'>
<h1 id="name-title">Foo</h1>
</div>
</paper-toolbar>
<div style="height: 2000px">
<section hero>
<h2>Bar</h2>
</section>
</div>
</paper-header-panel>
</body>
What am I doing wrong? This is according to the documentation https://github.com/PolymerElements/paper-header-panel
If you want to increase the height of the shadow, merely increasing the second parameter (i.e. the vertical length of the shadow) is not enough, you also need to give the drapshadow div a bigger height, like this -
paper-header-panel {
--paper-header-panel-shadow: {
height: 24px;
box-shadow: inset 0 24px 4px -4px rgba(0,0,0,0.4);
};
}
Note that I also updated the box-shadow to have more reasonable attributes.
Found the root cause:
It turns out that a new version of Chrome is not responding Polymer API while an older version of chromium is.
https://github.com/Polymer/polymer/issues/2307
Related
I have seen this coding in a video-workshop. It shall help to see the different boxes within a HTML-layout.
header,
main,
nav,
article,
aside,
footer {
background-color: rgba(0, 0, 0, 0.2);
padding: 0.5em;
margin-bottom: 0.5em;
}
* {
box-sizing: border-box;
}
body {
background-color: green;
color: white;
}
The HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel der Seite</title>
<link rel="stylesheet" href="#">
<link rel="stylesheet" href="#">
</head>
<body>
<header>
<a href="#">
Logo – Beschreibung
</a>
<nav>
Navigation
</nav>
</header>
<main>
<article>
<h1>Hauptinhalt</h1>
<p>Text</p>
</article>
<aside>
Seitenleiste
</aside>
</main>
<footer>
<nav>
Navigation
</nav>
<nav>
Navigation
</nav>
</footer>
</body>
</html>
It works. Please see here!
What drives me nuts currently: Where is this in-between dark-green specified, which the margins and paddings around the boxes have?
In CSS you have only two background-color definitions.
It is being defined in the css here:
header,main,nav,article,aside,footer {
background-color: rgba(0, 0, 0, 0.2);
padding: 0.5em;
margin-bottom: 0.5em;
}
For example with the structure with the nav being encolsed in the header:
<header>
<a href="#">
Logo – Beschreibung
</a>
<nav>
Navigation
</nav>
</header>
Your header and your nav are inheriting from the same css class which background color has an opacity setting: background-color: rgba(0, 0, 0, 0.2);
Html elements do not get laid inset, they are stacked on top of each other.
As the items are stacked and inherit, it gives the item darker shades as opacity as they stacked on each other.
Don't think of the elements on the page as some flat structure. An abstract example would be to think would be:
Say you have a piece of paper on a desk with some writing on it. You also have two pieces of glass that are tinted yellow, one slightly smaller than the other. Put one piece of yellow glass down over the paper and it turns from white to slightly yellow. Put the slightly smaller piece of glass on top of that glass. Now, where ever there is two panes of glass, it is even darker yellow.
That is essentially what you are doing with css here.
The body element is the paper which is defined as green: background-color: green;
The header is the next layer you are placing down and it is semi transparent (because you are telling it to have opacity with the last param in the rgba background-color: rgba(0, 0, 0, 0.2);) so you get a tinted color wherever the header overlays on top of the body.
Now you have another element you are placing inside the header. It has its own margins so it doesn't cover up the entire header completely. So you place the nav item inside the header. Per css it also has a background color with opacity background-color: rgba(0, 0, 0, 0.2) so it will cause that area to be even darker.
I'm implementing a Bootstrap 4 Grid. I've noticed that if I set a max-width on the container, the rows become uneven in length.
Here is an example:
.container {
max-width: 500px !important;
}
.purple-row [class^="col"] {
background-color: rgba(232, 179, 254, 0.5);
border: 1px solid rgba(232, 179, 254, 0.75);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row purple-row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
<div class="row purple-row">
<div class="col">col-4</div>
<div class="col">col-4</div>
<div class="col">col-4</div>
</div>
</div>
Why is this? Are the column flex-basis percentages not exact? Maybe it's something simple I'm missing, but I appreciate the help here.
Here is a CodePen Demo to experiment with this.
Bootstrap 4 lets you set the container max-width via its $container-max-widths variable. However when I do this, I get the problem I described.
The second row has classes called col, whereas the first row has classes called col-8 and col-4. By simply making the other col's also col-4's, it solves the problem: JSFiddle.
This appears to be a consequence of using percentage max-widths for the elements. I was able to solve the problem by adding the following CSS:
.purple-row [class^="col"] {
flex-grow: 1;
max-width: 100%;
}
I have an ons-list(basically a list) in my view that I want to have a scrollbar, so I added some css to my index.html, namely the following one:
<style>
::-webkit-scrollbar {
display: block !important;
width: 5px;
height: 0px;
}
::-webkit-scrollbar-track {
background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background: rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
}
</style>
This helps with the scollbar problem for the ons-list, but it also shows an "external" scrollbar to the whole page that is always there.
Is there any way to remove that?
Here's a screenshot to show you what i'm talking about:
You can see, that the scrollbar is tied to the main page, because in the following screenshot, I'm sliding the ons-sliding-menu to the left, and the scrollbar is tied to the main page.
Index.html looks like this :
<ons-sliding-menu main-page="navigator.html" menu-page="menu.html" side="right" max-slide-distance="250px" var="menu">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page ng-controller="menuController" ng-init="initMenu()">
<ons-list>
<ons-list-item modifier="tappable" onclick="menu.setMainPage('navigator.html', {closeMenu: true})">
<ons-icon icon="ion-home" style="padding-bottom:2px;"></ons-icon> Home
</ons-list-item>
<ons-list-item modifier="tappable" onclick="menu.setMainPage('Page1.html', {closeMenu: true})">
<ons-icon icon="ion-clipboard" style="padding-bottom:2px;"></ons-icon> Page1
</ons-list-item>
<ons-list-item modifier="tappable" onclick="menu.setMainPage('Page2.html', {closeMenu: true})">
<ons-icon icon="ion-loop" style="padding-bottom:2px;"></ons-icon> Page2
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="navigator.html">
<ons-navigator title="Navigator" var="myNavigator" page="main.html">
</ons-navigator>
</ons-template>
<ons-template id="main.html">
<ons-page id="main" >
<ons-tabbar>
<ons-tab active="true" page="page_1.html">
<div class="tab">
<ons-icon icon="ion-calendar" class="tab-icon"></ons-icon>
<div class="tab-label">Page_1</div>
</div>
</ons-tab>
<ons-tab page="settings.html">
<div class="tab">
<ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
<div class="tab-label">Settings</div>
</div>
</ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
It seems the body content is taking more space and resulting in the outer scroll bar.
You can try this to avoid the outer scroll bar -
body {
overflow-y: hidden;
}
I'm guessing you're using Onsen 1, since these issues shouldn't be present in Onsen 2. Apart from upgrading you can do the thing which #Nitesh suggested - just write overflow: hidden on the elements which you don't want to have a scrollbar.
The trick is that these scrollbars probably don't come from the body, but more likely from ons-page. Those pages insert a .page__content and put your content there. So you could try something like
.page__content {
overflow: auto;
}
Or if you're sure that the one which you don't want comes from the main page you could do something like:
#main > .page__content {
overflow: hidden;
}
If that doesn't help you should be able to debug the problem in a browser. right click -> inspect element and you can find the specific element which has the scrollbar.
An alternative would be not to change the styles of the scrollbars by default, but just to use the ons-scrollbar tag wherever you want a scrollbar.
I am building an SPA polymer 1.0 app that looks like this:
<iron-pages attr-for-selected="data-page"
selected="{{page}}">
<div data-page="home">
<paper-header-panel mode="{{mainMode}}">
<profile-toolbar></profile-toolbar>
<div class="content">
<search-menu></search-menu>
</div>
</paper-header-panel>
</div>
<div data-page="search">
<paper-drawer-panel ...>
...
</paper-drawer-panel>
</div>
</iron-pages>
<profile-toolbar> is a custom element that contains a <paper-toolbar>. If I leave out the <paper-header-panel> it works, but there's a padding and the scrolling doesn't work right. So I added a <paper-header-panel>.
The second page also contains a <paper-header-panel> inside the drawer and works correctly, but I can't make the first page display anything if it contains a <paper-header-panel>. What am I missing?
Try adding following css class to divs that are direct parents of your paper-header-panels:
.content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
Here is a solution you might try.
Note this open bug that has (apparently) been resolved for all except iOS (Safari).
I'm having trouble overriding the background color of a button, whose color is set in some 3rd party CSS.
The (3rd party) styles.css is loaded prior to my checkout.css file:
// styles.css
#ac-page #checkoutSteps footer .button {
background-color: #ea830d;
border-color: #ea830d #ea830d #a25a09;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
And then in my CSS:
// checkout.css
body.checkout-onepage-index #ac-page #checkoutSteps footer .button {
background-color: #E5582C;
border: 3px solid red;
}
<div id='ac-page'>
...
<ol class='opc' id='checkoutSteps'>
<li>
...
<footer id="shipping-buttons-container" class="" style="">
<button type="button" class="button" title="Proceed To Shipping Type" onclick="shipping.save()">Proceed To Shipping Type</button>
<span id="shipping-please-wait" class="please-wait" style="display: none;">
<img src="../loader.gif" alt="Loading next step..." title="Loading next step..." class="v-middle"> Loading next step...
</span>
<p class="required">* Required Fields</p>
</footer>
</li>
</div>
In every browser except IE9, my checkout.css rule takes precedence, as it is more qualified. Something I'm doing missing here?
UPDATE:
I tried adding !important to the rule and that didn't help.
Also, I should note that there is a border override which is working just fine.
Another really odd thing about IE9's "Firebug Lite" which is what I'm using to try to inspect and better understand the order of precedence - is that it's not showing me anything from checkout.css at all. I know that some rules from checkout.css are taking effect - the border for example - but it doesn't show me any of them in the inspector.
UPDATE 2:
Posted the markup
Turns out there was one of these bad boys in the 3rd party CSS:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEA830D', endColorstr='#FFEA830D', GradientType=0);
Which is a background color gradient.
Putting
filter: none;
in my checkout.css fixed it.