Material Design - Secondary Scroll Bar for List Component - html

In my project I'm using the code from google's material design website: https://material.io/components/web/catalog/lists/
It work great, however, as more list entries are added I have to scroll down to see them. The problem is that to scroll through the list, I am scrolling past my page header.
I'm asking if anyone knows how to add a 'secondary scroll bar' (I don't know what you call them) that when used only scrolls through the list.
An example of what I'm trying to achieve is here: https://stackoverflow.com/a/21998914/8625593
Thanks in advance!

Limit the height on the list container. It will cause a scroll bar to be shown or add a scroll vertical scroll bar with the property 'over-flow-y'.
For example:
#listContainer{
max-height:200px;
width:18%;
overflow:hidden;
overflow-y:scroll;
}
#container {
overflow-y:scroll
}
<div>
<h1>Headline</h1>
<div id="container">
<ul id="listContainer">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>Link 11</li>
<li>Link 12</li>
<li>Link 13</li>
<li>Link 14</li>
<li>Link 15</li>
<li>Link 16</li>
<li>Link 17</li>
<li>Link 18</li>
<li>Link 19</li>
<li>Link 20</li>
</ul>
</div>
<div>Possible Summary Information</div>
</div>

Related

Navigation links length based on window height [duplicate]

This question already has answers here:
how do i include css based on screen size of the device
(4 answers)
How to use particular CSS styles based on screen size / device
(6 answers)
Closed 4 years ago.
I have a horizontal navbar that floats at the top of the page. For some menu options, a long list of links is necessary. For higher resolution monitors, this is fine. For lower resolution monitors, it's not because not all the links are visible.
I want a scrollbar for the list of links to appear for those with lower resolutions or shorter window heights. I've tried using various methods of setting the height and overflow options for the ul tag. A fixed height isn't going to work obviously. I've tried setting different vh values, but that doesn't seem to do what I want either.
<li class="menu-has-children">OPTIONS
<ul style="height: auto; overflow-y: auto; overflow-x: hidden;">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
<li>Option 9</li>
<li>Option 10</li>
<li>Option 11</li>
<li>Option 12</li>
<li>Option 13</li>
<li>Option 14</li>
<li>Option 15</li>
<li>Option 16</li>
<li>Option 17</li>
<li>Option 18</li>
<li>Option 19</li>
<li>Option 20</li>
</ul>
</li>

CSS Only method to horizontal scrolling [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 7 years ago.
Improve this question
I have a nav bar that I'm scrolling horizontally and on hover show the child elements.
http://jsfiddle.net/vwwd6mec/
However, once the child elements are displayed i'm then able to scroll down. Anyone know how to prevent this so the on hover (child list) displays outside my div?
This is my HTML:
<body>
<div class="container">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>
<span>Dropdown 1</span>
<ul>
<li>Sublink 1</li>
<li>Sublink 2</li>
<li>Sublink 3</li>
<li>Sublink 4</li>
<li>Sublink 5</li>
<li>Sublink 6</li>
<li>Sublink 7</li>
<li>Sublink 8</li>
<li>Sublink 9</li>
</ul>
</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>
<span>Dropdown 2</span>
<ul>
<li>Sublink 1</li>
<li>Sublink 2</li>
<li>Sublink 3</li>
<li>Sublink 4</li>
<li>Sublink 5</li>
<li>Sublink 6</li>
<li>Sublink 7</li>
<li>Sublink 8</li>
<li>Sublink 9</li>
</ul>
</li>
</ul>
</nav>
<p>Desire is to have nav bar scrollable horizontally and drop downs that aren't cut - possible without JavaScript?</p>
</div>
</body>
Just a "proof of concept", but try this fiddle
it does:
keeps the nav items' children attached to the parent
displays the dropdowns over the page contnet
it doesn't:
keep the scrollbar immediately below the navbar (instead it's below the page's content)
recap:
<body>
<div class="container"> <!-- positioned relatively so children
namely .non-scrolling-container
can be attached to it -->
<div class="fake-scroll-area"> <!-- scroll is applied to this -->
<nav> <!-- scrolls with .fake-scroll-area -->
<!-- nav contnet -->
</nav>
<div class="non-scrolling-content"> <!-- positioned absolutely
with respect to .container -->
<!-- where normal page stuffgoes -->
</div>
</div>
</div>
</body>
it kind of fakes what you're looking for.
The issue has to do with position: relative on the parent elements. If you add it to the direct parent <li>, then the absolute positioned child element will be nested inside all of the containers around that <li>. But if you only add position: relative to .container instead, then the absolute element will appear outside of the container.
See this forked fiddle: http://jsfiddle.net/tnp7hmqv/1/
The sublinks should now be appearing on top of the container.
Not sure if this is what you want. I have found this online at http://www.bootply.com/l2ChB4vYmC
The solution shows how to make a toggle side button on the nav bar.
That building such long nav bar will need javascript work I think.

Foundation, nav bg

I am working with Foundation for the very first time for one of my college assignments. After extensive tests and solution searching, I think I finally have to ask for help.
How do I alter the background-color of section class="top-bar-section"? I've been trying to temper with it in CSS, but nothing has worked. =(
<section class="top-bar-section">
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</section>

How can I make only the <a> tag clickable not the entire list item clickable in an un-ordered list?

I just want the text to be clickable not the entire list item block.
<a class="menu_head">Hello</a>
<ul class="menu_body">
<li>Sub-menu 1</li>
<li>Sub-menu 2</li>
<li>Sub-menu 3</li>
<li>Sub-menu 4</li>
<li>Sub-menu 5</li>
<li>Sub-menu 6</li>
<li>Sub-menu 7</li>
</ul>
</body>
</html>
add this to your css
a {display:inline-block;}

Scrollable link list HTML CSS

I am in the need of adding some more functionality to a couple of list items inside an ul, and I would like to know how I can use scroll functions to be able to scroll up and down because of the amount of items.
This is my list:
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
Im not exactly sure if this is what you're searching for, but you can wrap the list with a element which has a defined height.
<div id="wrapper">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</div>
...and the css:
#wrapper {
overflow:auto;
height:200px;
}
So if the list is longer/higher than 200px (or what ever you've specified) a vertical scrollbar will show up.