I am using Polymer paper elements. I need two toolbars for my page, one at top and other at bottom. How do I make the other one.
I have looked here for answer. But that is a core-toolbar and I am using v1.0. Still on using .bottom, the toolbar remains on top.
Thanks
I like to use Flexbox for things like this. Here's an example with paper-header-panel:
<paper-header-panel>
<paper-toolbar><span>Top Toolbar</span></paper-toolbar>
<div class="layout vertical fit">
<div class="layout flex">content</div>
<paper-toolbar><span>Bottom Toolbar</span></paper-toolbar>
</div>
</paper-header-panel>
Note that this is using iron-flex-layout & you should probably use the mixin version of layout styles instead of the classes directly as I've done here (i.e. #apply(--layout-vertical), etc) or use flexbox styles directly.
The .bottom in the paper-toolbar documentation is intended to align items within the toolbar. If you want to make the toolbar itself bottom aligned, you'll need to style the paper-toolbar element and its container.
Styles:
<style>
.container {
position: relative;
}
paper-toolbar.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
HTML:
<div class="container">
<paper-toolbar></paper-toolbar>
<paper-toolbar class="bottom"></paper-toolbar>
</div>
Related
I'm trying to modify default paper toolbar behavior namely making content appear right at the top of the bar. Poking at chrome developer tool, I found that if I remove height and padding from:
.toolbar-tools.paper-toolbar {
position: relative;
height: 64px;
padding: 0 16px;
pointer-events: none;
}
My top and bottom sections of the toolbar appear without any gaps from top(height), bottom(height) and left(padding) sides:
<paper-toolbar>
<div class="top">
<p>Top text</p>
</div>
<div class="bottom">
<p>Bottom text</p>
</div>
</paper-toolbar>
I tried adding css rules to .top , .bottom and .toolbar-tools but that doesn't seem to make any effect and original rules stand. I was wondering if there's any way of removing margins for .top and .bottom sections of the paper-toolbar via:
paper-toolbar {
--paper-toolbar-background: black;
--paper-toolbar-color: red;
--paper-toolbar: {
font-size: 15px;
height: 200px;
};
}
Or am I better off just creating custom toolbar myself?
edit:
here's the link to the code
https://github.com/T0MASD/webcomponents-playground/blob/master/app/elements/ui-navbar/ui-navbar.html
paper-toolbar has one inner container (#topBar) by default and two others (#middleBar & #bottomBar) when it is set as tall.
Adding a top and bottom classes only work when the toolbar is set as tall.
The inside content is moved to the middle by flexbox, so to move it to the top change the align-items style to flex-start.
Example Style:
<style is="custom-style">
paper-toolbar ::shadow #topBar {
align-items: flex-start;
}
</style>
There is not a mixin for the #topBar so we have to select it with the ::shadow selector. You can do the same for the #bottomBar also.
Here's a working example
I am currently learning polymer and encountered the following problem:
I'd like to have a split layout where the left side is a list of items and the right side can display additional information about the selected item.
I tried to achieve this with the following (simplified) code:
<body fullbleed vertical layout>
<style type="text/css">
.card_container {
margin: 16px;
position: relative;
}
.details_container {
/* position: fixed;
*/ }
.white-bg {
background-color: white;
margin: 8px;
max-width: 650px;
}
.white-bg.details {
margin: 24px 24px;
}
</style>
<div layout horizontal center-justified>
<div id="card_container" class="card_container" layout vertical>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
</div>
<div class="details_container" layout vertical flex>
<div class="white-bg details" flex relative>
<p>Some sample text...</p>
</div>
</div>
</div>
</body>
The layout looks quite nice, until I assign position: fixed to the details_container div.
I created a JSBin that demonstrates the problem: http://jsbin.com/ziqayufojeco/2/edit?html,output
Just uncomment the position: fixed; attribute.
Any ideas how to fix that?
I don't actually know what the specifications say, but I'm not surprised that you cannot use flex in combination with position: fixed.
The flex attribute (which is shorthand for CSS flex properties) tells CSS how to position and size a element relative to it's sibling elements. OTOH, position: fixed tells CSS that you want the element to be very specifically positioned.
I can understand that you would like the calculated size to be the same regardless of position: fixed, but it doesn't work that way. I'd like to suggest an alternative, but I can't figure out what outcome you were after.
I dont know why postion: fixed is not working in polymer starter app element.
But to adding fixed element functinality you can use postion: sticky with display:flex
I'm just starting to learn html and css and I've been looking at various websites to practice.
This particular website (http://jsfiddle.net/Hexapod/CWB39/260/show/) had caught my attention but I'm having trouble figuring out how the elements here are working.
If you go to the website, there are "facts boxes" that were made using div elements. These div elements however, are grouped together by a another div element. This div element has an absolute position and an offset of 0px in all directions. Can anyone explain to me what the purpose of this is?
Here's what it looks like:
#container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
<div id="container">
<div id="factbox1" class="info">
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
Thanks in advance!
PS. If I'm doing something wrong with the formatting or anything, please inform me! This is my first time posting here.
This is in place to stretch the element to the full extremes of the closest parent with position set. In this case, to extend the full height and width of the browser viewport.
Its basically telling the element that its top should meet the top side of its parent, its bottom should stretch to the bottom of its parent and the same for its left and right sides.
An alternative would be to use the below CSS:
html, body, #container{
height:100%:
width:100%;
}
The difference being that by using position:absolute the option for layering content is provided.
You can use the inset shorthand these days (not supported by IE of course)
#container {
position: absolute;
background: #002D62;
inset: 0px;
color: #fff;
}
<div id="container">
<div id="factbox1" class="info">
Full with and height 😄
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
There is a navigation-bar with that css-definitions:
.nav {
position: absolute;
top: 0;
height: 40px;
...
}
<div class="nav">...</div>
That means that this navigation is always on to of the page. But now I have to insert a second bar at the top of that naviation-bar.
.top-nav {
position: absolute;
top: 0;
height: 40px;
...
}
<div class="top-nav">...</div>
<div class="nav">...</div>
That "top-nav" will be displayed at several pages (i didn't know now). So I am not able to change the css definitions or the html of the class "nav".
I am looking only for a (css) possibility to move any html-tag with the css-attribut "top: 0" down for a fixed value.
JavaScript is not a solution: There several pages i will include that "top-nav".
Edit:
overlapping:
not overlapping:
I am looking for that not overlapping solution.
Looking to your html if you want that a div reference to his container you have to put it inside the container. try this:
<div class="nav">
<div class="top-nav">...</div>
</div>
So the top-nav refers to the nav container.
EDIT 1:
No chance if you can't change the html. The thing you can do is add a javascript which add text inside top-nav. In this way you can generate code to put another div inside it.
for reference look at jquery text
You could try with:
position: static;
or without position definition (static is the defaul). In static position each box appear in the order they are in the html.
I am using the columnal(http://www.columnal.com/) responsive grid framework and am trying to create a vertical divider line in between columns that will stay centered in the right margin as the viewport is resized.
I have tried a couple of solutions using background images and pseudo elements but neither has been successful. The right margin is used by the columnal framework so this can't be used as part of the solution which is why I think a vertically repeating background image or pseudo element is required.
I am also trying to avoid using additional html elements in the code, I would like to keep this as clean as possible. However if that's the only solution, then so be it.
Here's the HTML:
<div class="container">
<div class="row">
<div class="col_4 vertical_divider">
<div class="content">I want a vertical divider line to appear in the centre of the margin to the right of this grey box ->
<br/>
<br/>If you don't see columns to the right re-size this window to make it bigger.</div>
</div>
<div class="col_4 vertical_divider">
<div class="content">This example uses the Columnal responsive framework</div>
</div>
<div class="col_4 last">
<div class="content">Solution could be using a repeating image, pseudo elements or something else. I would like to avoid using additional html if possible. Solution should preferably be css applied to the 'vertical_divider' class.</div>
</div>
</div>
</div>
and here's the CSS:
* {
box-sizing: border-box;
}
.content {
background-color:#ddd;
min-height:400px;
padding:5px;
}
/* Solution preferably applied to this class */
.vertical_divider {
}
I've put it up as fiddle here which also includes a little more explanation:
http://jsfiddle.net/NtuZJ/12/
I've came up with a nice solution using :after pseudo class. The only disadvantage is that you have to specify half the size of the margin (to the right setting).
jsFiddle Demo
.vertical_divider:after {
background: red;
width: 1px;
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: -15px;
}