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
Related
I've been trying to achieve this scrolling effect from this website: https://livingbeautyinc.com. As you scroll, the previous content stays on the same position and the new content stacks on top of the old one. I've tried using the position:sticky then set the z-index for each component but it doesn't seem to work. Anyone has any idea how to make this scrolling effect with CSS?
Source: https://codepen.io/daniel5120/pen/PoEoaEP
So ideally I want to make the contents on the first container stay exactly the same where they are and then the second element stays on top of the first one.
Your code on codepen did not work with position: sticky due to the height in html and body. If you want to learn more, I think this is the explanation.
Here is your modified codepen code.
And below is an example I did to help me understand why your code didn't work.
html, body {
margin: 0px;
padding: 0px;
}
.pages {
position: sticky;
width: 100%;
height: 100vh;
top: 0;
display: inline-block;
padding: 10px;
box-sizing: border-box;
}
<div class="pages" style="background-color:red;">
<h1>Title RED</h1>
<img src="https://picsum.photos/400/100?random=1">
</div>
<div class="pages" style="background-color:yellow;">
<h1>Title YELLOW</h1>
<img src="https://picsum.photos/400/100?random=2">
</div>
<div class="pages" style="background-color:blue;">
<h1>Title BLUE</h1>
<img src="https://picsum.photos/400/100?random=3">
</div>
<div class="pages" style="background-color:green;">
<h1>Title GREEN</h1>
<img src="https://picsum.photos/400/100?random=4">
</div>
I am trying to understand why a div with display:block will not sit under another div with display:block
My mark-up is this:
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: absolute;
top:0;
left:0;
}
.container .text-left{
position: absolute;
top:35rem;
left:35rem
}
.container .text-right{
position: absolute;
top:35rem;
right:35rem
}
<div class="container" >
<img src="/image1.jpg" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="/image2.jpg" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I am trying all sorts of stuff to make this work - overflows etc - but can't seem to get the second display block div to sit under the first.
EDIT: It seems that if you put position:absolute element/s inside a position:relative element - that may have height due to that element being an image - the absolute element/s removes this height. So you need to add it back in as height: X.
But why??
Is this due legacy mark up - using absolutes in ways not designed for?
Why would the browser not take into consideration the image height as default. And we could override this if needed.
Can anyone please enlighten me?
thanks
The reason you have lost height is because position:absolute; removes element from the flow, therefore your parent container won't be able to use it to work out its height. It's not legacy markup, it's part of the scope.
A quick excerpt from CSS-Tricks
The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
If for whatever reason you are required to have that specific element as position:absolute; your next best bet would be to adjust the parent container using JavaScript/jQuery, however that might be a bulky fix.
My suggestion would be to try and achieve your preferred layout without using the absolute positioning, and then if you get stuck, post another question here explaining your desired layout and current code trying to achieve it.
EDIT
That being said, if the mentioned JavaScript/jQuery solution does not sound to bulky to you, you could try the following:
$('.container').each(function(){
$(this).css({
'padding-top': $(this).find('img').height()+'px'
});
});
This will add padding-top to the container based on the image size. Alternative, you could add an empty div below the image and adjust its height based on the image size.
To make it work just make the img and test_* position to relative instead of absolute. Why ? Position absolute removes element from the flow, that means that because all your container's childrens are absolute, it is like your container has no content, that's why it collapse.
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: relative;
top:0;
left:0;
}
.container .text_left{
position: absolute;
top:90%;
left:5%;
color: #fff;
}
.container .text_right{
position: absolute;
top:90%;
right:5%;
color: #fff;
}
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
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>
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>
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;
}