I have a fixed positioned div, which has a scrollable content, inside this div I want to define an another fixed positioned div, which should not scroll with the parent content. How can I do it with css?
.fixed {
position: fixed;
}
.parent {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.child {
left: 200px;
width: 100px;
height: 100px;
background-color: yellow;
}
<div class="parent fixed">
<h1>Parent fixed</h1>
<div class="child fixed">
</div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
http://jsfiddle.net/bbvarga/chqe7omb/
I expect that the yellow div should be fixed to the browser window, irrespectively of the scroll position.
Many places I can read that fixed positioning means relative to the browser window, but it's not true, because if I scroll the parent div, the position of the fixed child will be different.
I know If I make the two fixed siblings, than it works, so the question is, how can I make it work if the two fixed in a parent-child relationship.
Update
I'm on Mac OSX Yosemite 10.10 Chrome 42, and here's an anim gif what I see when scrolling :
Don't know what to say, I'm very sad.
Turns out it was a bug in chrome, see details here:
https://code.google.com/p/chromium/issues/detail?id=490141
Related
I have created a sticky list however after adding more content, no scroll bar appears and so the the list is being clipped. How do I fix this problem? I've added the styles as-well as the markup (only showing one list element however there's over 30 list items within the ul)
.list {
position: -webkit-sticky;
position: sticky;
top: 5rem;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content
}
<div class="list">
<h2>
<button>
<span>List</span>
</button>
</h2>
<section class="list-links">
<ul>
<li>
<a>
List
</a>
</li>
<li>
</ul>
</section>
</div>
I guess you want to make the header sticky and users scroll down the list but keep the title sticks, then codes should be like this:
.list {
height: 100px
position: relative;
}
.sticky {
position: sticky;
top: 0;
}
<div class="list">
<h2 class="sticky">
<button>
<span>List</span>
</button>
</h2>
<section class="list-links">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</section>
</div>
Note that you have postition: sticky; content inside of element that has `position'.
With handlebars templates, you can use #last to get the last item in an #each, however, I want to know the last item of a parent's #each:
Here is my template (simplified):
{{#each property}}
<li class="property">property-header</li>
{{#each this.modules}}
<li class="module">module-header</li>
{{#each this.items}}
<li class="{{if #last of property}}last{{/if}}">item</li>
{{/each}}
{{/each}}
{{/each}}
Obviously {{if #last of property}} does not work, but it's what I want to achieve.
This is the generated output:
<!-- property -->
<li>property-header</li>
<li>module-header</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>module-header</li>
<li>item</li>
<li>item</li>
<li>item</li> <!-- TARGET THIS ONE
<!-- property -->
<li>property-header</li>
<li>module-header</li>
<li>item</li>
<li>item</li>
<li>item</li> <!-- TARGET THIS ONE
<!-- property -->
<li>property-header</li>
<li>module-header</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>module-header</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>module-header</li>
<li>item</li>
<li>item</li>
<li>item</li> <!-- TARGET THIS ONE
It shouldn't be hard if I was able to wrap content in a span or div, but that's not possible with a list. There also no previous sibling selector in CSS so I also can't target the last item before a .property-header.
Seems you are able to select the parent's #last with #../last, so:
<li class="{{#if #../last}}{{#if #last}}last{{/if}}{{/if}}">
item
</li>
I'm trying to figure out a CSS nth-child formula to target every other child, but always including the last child.
For example:
With 1 child, it will target the single child.
With 2 children it will target the 2nd child.
With 3 children it will target children 1 and 3.
With 4 children it will target children 2 and 4.
With 5 children it will target children 1 3 and 5.
And so on...
Is this possible with only CSS? I'm okay with using something other than or in addition to nth-child but trying to stay CSS only.
Is this fine for you?
li:nth-last-child(2n+1) {
color: red;
}
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
</ul>
I am using this kind of code to display items from database:
<!-- HTML code-->
<%
//rest of the java code
while(rs.next())
{
%>
<p><%=rs.getString("item")%></p>
<%
}
//rest of the java code
%>
<!-- HTML code-->
I want the output to be something like in the image so that after 5 rows the item name move to next column.
How to I do this?
you may set an height to set numbers of lines : line-height * numbersOfLineWanted + padding/margin applied to tags ( mind box-sizing).
Set a column-width value and give same width to element.
ul {
width:100px;
-moz-column-width:100px;
-webkit-column-width:100px;
column-width:100px;
height:6.5em;
}
/* demo show */
ul {
border-left:solid;
padding:0;
counter-reset:lis;
}
li {
display:block;
}
li:after {
counter-increment:lis;
content:' ' counter(lis);
}
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
or use the flex display :
ul {
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:6.5em;
width:0;
}
/* demo show */
ul {
border-left:solid;
padding:0;
counter-reset:lis;
}
li {
display:block;
width:100px;
}
li:after {
counter-increment:lis;
content:' ' counter(lis);
}
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
I've a nested list:
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Last Nested Item</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
<li>Last Item</li>
</ul>
I just wanted to get at the very last LI 'last item' using a CSS3 selector, its nothing major, just to put some rounded borders on the hover to stop it spilling out of a container, so no back-compatibility is needed (since the borders on the container won't be rounded on non CSS3 browsers anyway).
I can't seem to get at it without selecting the last <li> in the nested list as well. I am trying (amongst other things)
.container ul:first-of-type li:last-child a
To me, the above is very definitely saying "get the link in the last LI in the first UL" but apparently, Firefox thinks differently.... (so does IE and Chrome, so it must be me....)
Can anyone see where I'm going wrong?
It says to get the link in the last li in the first ul in any nesting level, which is why you're getting the item in the nested list as well.
To prevent this, use child selectors to limit only to the immediately-nested list items, instead of descendant selectors which disregard nesting levels:
.container > ul:first-of-type > li:last-child > a
.container > ul:first-of-type > li:last-child a
This means select the first level of li and get the first level of links in the last li element.
You don't need the last > a unless you have nested links too.
This works for me:
<style>
.container > ul:first-of-type > li:last-child a {
background:red;
}
</style>
<div class="container">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Last Nested Item</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
<li>Last Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Last Nested Item</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
<li>Last Item</li>
</ul>
</div>