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'.
Related
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 can't figure out how to put the nav and the footer on the same line. I've tried changing the list margin, but this didn't work. I can't find what I'm doing wrong with the code below:
ul {
margin: auto;
padding-top: 0;
text-align: center;
}
li {
display: inline-block;
list-style-type: none;
}
<nav>
<ul>
<li><a href=''>Home</a>
</li>
<li><a href=''>About</a>
</li>
<li><a href=''>Contact</a>
</li>
<li><a href=''>Citations</a>
</li>
</ul>
</nav>
<footer style="color: white">
<pre> 2016-2017 © by Owner</pre>
</footer>
Any suggestions?
put the nav inside the footer...
<footer>
<nav>
<ul>
<li><pre> 2016-2017 © by Owner</pre></li>
<li><a href=''>Home</a>
</li>
<li><a href=''>About</a>
</li>
<li><a href=''>Contact</a>
</li>
<li><a href=''>Citations</a>
</li>
</ul>
</nav>
</footer>
This will allow both the nav and footer elements to render on the same line.
nav,
footer {
display: inline-block;
}
If you'd like them to also be centered within the browser window or region, you could add a wrapper element around them and apply text-align: center; to that wrapper element.
In order to space them out, you should alter the left/right margin accordingly.
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
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>