scrollable contents overlaps on fixed non-scrollable content - scrollbar

I want the scrollable part of the page to scroll within it's height only. But it overlaps with the header whose position has been set to 'fixed'.
Here is the fiddle: https://jsfiddle.net/3xc9n6jb/
How do I make them not overlap so that the scrollable content scrolls without touching the header?
<div class="main-div">
<div class="myBox"></div> <!--This red rectangle is the header. The scrollable content should not overlap with this.-->
<div class="scrollable-content horizontal">
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
<li>Sixth Item</li>
<li>Seventh Item</li>
<li>Eight Item</li>
<li>Ninth Item</li>
<li>Tenth Item</li>
</ul>
</div>
</div>
.myBox {
width: 500px;
height: 50px;
background-color: red;
position: fixed;
}
ul {
position: absolute;
margin-top: 30px;
}


maybe you want something like this:
<div class="main-div">
<div class="myBox"></div> <!--This red rectangle is the header. The scrollable content should not overlap with this.-->
<div class="scrollable-content horizontal">
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
<li>Sixth Item</li>
<li>Seventh Item</li>
<li>Eight Item</li>
<li>Ninth Item</li>
<li>Tenth Item</li>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
<li>Sixth Item</li>
<li>Seventh Item</li>
<li>Eight Item</li>
<li>Ninth Item</li>
<li>Tenth Item</li>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
<li>Sixth Item</li>
<li>Seventh Item</li>
<li>Eight Item</li>
<li>Ninth Item</li>
<li>Tenth Item</li>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
<li>Sixth Item</li>
<li>Seventh Item</li>
<li>Eight Item</li>
<li>Ninth Item</li>
<li>Tenth Item</li>
</ul>
.myBox {
width: 500px;
height: 50px;
background-color: red;
position: fixed;
top:0;
}
ul {
margin-top: 50px;
}
the key is dont use position:absolute in ul selector and add the value of margin-top equals to height of mybox.

Related

Apply height of fixed parent to child element [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
I have a container inside a parent with fixed position, and want to apply the same height of the parent element to that container. But the height: 100% is not applying. What am I missing here?
.fixed-container {
position: fixed;
width: 400px;
top: 50px;
max-height: calc(100% - 100px);
}
.list-container {
height: 100%;
overflow-y: scroll;
}
https://codepen.io/NoahWetjen/pen/dyjVbRX

Ok. Just add display:flex; flex-direction:column to .fixed-container
.fixed-container {
position: fixed;
width: 400px;
top: 50px;
max-height: calc(100% - 100px);
background: lightgreen;
display:flex;
flex-direction:column;
}
.list-container {
height: 100%;
overflow-y: scroll;
background: rgba(0,0,0,.2);
}
<div class="fixed-container">
<div class="list-container">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>

change max-height to height so both elements have the same height

To be honest i dont really understand what you want. is this what you are looking for?
.fixed-container {
position: fixed;
width: 400px;
top: 50px;
max-height: calc(100% - 100px);
background: lightgreen;
overflow:hidden
}
.list-container {
height: inherit;
overflow-y: scroll;
background: rgba(0,0,0,.2);
}
<div class="fixed-container">
<div class="list-container">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>

Select First Child List Item That has Children

I have the following unordered list item with nested ul. How do I select the first li aka the text "List A" ?
I tried ul > li:first-child but this selects the first list item's child as well.
<div class="container">
<ul>
<li>
List A
<ul>
<li>List A sub</li>
<li>List A sub</li>
<li>List A sub</li>
<li>List A sub</li>
</ul>
</li>
<li>
List B
<ul>
<li>List B sub</li>
<li>List B sub</li>
<li>List B sub</li>
<li>List B sub</li>
</ul>
</li>
</ul>
</div>

You should set it up with the default style of ul > li.
ul > li{
font-weight: normal;
color: gray;
}
.container > ul > li:first-child {
font-weight: bold;
color: red;
}
<div class="container">
<ul>
<li>
List A
<ul>
<li>List A sub</li>
<li>List A sub</li>
<li>List A sub</li>
<li>List A sub</li>
</ul>
</li>
<li>
List B
<ul>
<li>List B sub</li>
<li>List B sub</li>
<li>List B sub</li>
<li>List B sub</li>
</ul>
</li>
</ul>
</div>

scrollable div overflows its parent instead of scrolling

I have some cards with fixed width and which are growable up to a maximum height. Each card contains a list of items which should be scrollable if the card has reached its maximum height:
<div class="card">
<div class="card-header">
<h3>
Header
</h3>
</div>
<div class="card-body">
<h5>Title</h5>
<div class="scroll-view">
<ul>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
</ul>
</div>
<h5>Footer</h5>
</div>
</div>
.
.card {
margin: 1rem;
width: 12em;
max-height: 24rem;
background-color: white;
border: 1px solid aliceblue;
display: flex;
flex-direction: column;
}
.card-header {
background-color: gray;
}
.card-body {
height: 100%;
padding: 1rem;
}
.scroll-view {
overflow-y: auto;
overflow-x: hidden;
}
Unfortunately, what ends up happening is that once there are enough items to exceed the maximum height, they just overflow past the end of the card instead of scrolling: https://jsfiddle.net/wg4160fh/21/
How can I prevent this from happening?

You shouldn't really need the .scroll-view div inside of the .card-body. But if you want to keep the footer intact, you'd need to define a height on the .scroll-view in order to hide anything.
You could also use overflow-y: scroll or just overflow: scroll on the card-body to remove the .scroll-view
Example using defined height on .scroll-view
.card {
margin: 1rem;
width: 12em;
max-height: 24rem;
background-color: white;
border: 1px solid aliceblue;
display: flex;
flex-direction: column;
overflow: scroll;
}
.card-header {
background-color: gray;
}
.card-body {
height: 100%;
padding: 1rem;
overflow: scroll;
}
.scroll-view {
background: Teal;
}
<div class="card">
<div class="card-header">
<h3>
Header
</h3>
</div>
<div class="card-body">
<h5>Title</h5>
<div class="scroll-view">
<ul>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
<li>An item</li>
</ul>
</div>
</div>
<div class="card-footer">
<h5>Footer</h5>
</div>
</div>
Edit
I clearly missed the card height (sorry). But you'll just add the overflow:scroll property to the .card element instead. I've updated the example.
Edit 2
I've updated the snippet to place the overflow on the .card-body and moving the footer area to a separate div.

VB .Net - Looping through set amount of list items

I have a list of say 20 items. But for my design I need to ensure there is never more than 5 items per ul. Is there a way I can loop through the list and after every 5, start a new ul? Not sure if this is possible, but if you've got any alternatives let me know.
Current list:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
Desired Result:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>

Since it is MVC, it is pretty easy to do this in a nice and simple fashion without getting int String Builders and html within your code.
Lets say you have your page model which is an Enumerable of your data model.
You could do something like
#For i As Integer = 0 to Model.Count() - 1
#IIf(i Mod 5 = 0, Html.Raw("<ul>"), "")
#<li>#Model(i).Value</li>
#IIf((i + 1) Mod 5 = 0, Html.Raw("</ul>"), "")
Next
note This has not been tested and been a while since I did MVC with vb.net, so might not be 100% correct

Are you looking to manipulate existing and rendered HTML? Because then I wouldn't use VB.NET but rather jQuery or some kind of client-side technology to manipulate your HTML. If you're composing the HTML from code to be sent to the view you can try following code:
Dim sb As New StringBuilder()
sb.Append("<ul>")
For i As Integer = 1 To 20 Step 1
sb.Append("<li><a href=''>list item</a></li>")
If (i Mod 5) = 0
sb.Append("</ul><ul>")
End If
Next
Dim result As String = sb.ToString()
result = result.Remove(result.LastIndexOf("<ul>"))

Give this a try
Dim someItms() As String = New String() {"Lorem", "ipsum", "dolor", "sit", _
"amet", "consectetur", "adipisicing", _
"tempor", "incididunt", "ut", "labore", _
"sunt", "in", "culpa", "qui", "officia", "deserunt", _
"mollit", "anim", "id", "est", "laborum", "LASTITEM"}
Dim myelmnts As XElement = <div></div>
Const grpsz As Integer = 5 'numer of li's per ul
For x As Integer = 0 To someItms.Length - 1 Step grpsz
'get a group, note last group may or may not be full
Dim foo As IEnumerable(Of String) = someItms.Skip(x).Take(grpsz)
Dim ul As XElement = <ul></ul> 'define ul
Dim li As XElement 'define li
For Each s As String In foo 'create li's
li = <li><%= s %></li>
ul.Add(li) 'add to ul
Next
myelmnts.Add(ul) 'add completed ul to list
Next

Use both off-canvas and fixed navbar in responsive design

I am trying to make my UI-kit navbar fixed, so it will follow the scroll, but my problem is, that it now is overlapping my Off-canvas (like it has a higher z-index, but it hasn't).
Does anyone know how to achieve that the off-canvas is on top of a navbar with a fixed position (top)?
EDIT #1
<nav id="mobileNav" class="tm-navbar uk-navbar uk-navbar-attached uk-hidden-large">
<div class="uk-container uk-container-center">
<a data-uk-offcanvas="{target:'#offcanvas-3'}" class="uk-navbar-toggle"></a>
1.000,-
<div class="uk-navbar-brand uk-navbar-center"><img src="http://www.mammashop.dk/skin/frontend/default/ic_verticalmom_pink_dk/images/logo.gif" title="Mammashop.dk" alt="Mammashop.dk"></div>
</div>
</nav>
<div id="offcanvas-3" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
<li>Item</li>
<li class="uk-active">Active</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Item</li>
<li class="uk-nav-header">Header</li>
<li class="uk-parent"><i class="uk-icon-star"></i> Parent</li>
<li><i class="uk-icon-twitter"></i> Item</li>
<li class="uk-nav-divider"></li>
<li><i class="uk-icon-rss"></i> Item</li>
</ul>
</div>
</div>
Navbar documentation: http://getuikit.com/docs/navbar.html
Off-canvas documentation: http://getuikit.com/docs/offcanvas.html

My solution:
<nav class="uk-navbar ">
<a class="uk-navbar-brand uk-hidden-small" href="#">Isaac Udotong</a>
<div class="uk-navbar-content uk-navbar-flip uk-hidden-small">
<div class="uk-button-group">
<ul class="uk-navbar-nav uk-hidden-small">
<li class="">
About
</li>
<li>
News
</li>
<li>
contact
</li>
</ul>
</div>
</div>
<div class="uk-container uk-container-center">
<a data-uk-offcanvas="{target:'#offcanvas-3'}" class="uk-navbar-toggle uk-visible-small"></a>
<div class="uk-navbar-brand uk-visible-small uk-hidden-large uk-hidden-medium">
<img src="" title="Mammashop.dk" alt="Mammashop.dk"></div>
</div>
</nav>
<div id="offcanvas-3" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
<li>Item</li>
<li class="uk-active">Active</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Item</li>
<li class="uk-nav-header">Header</li>
<li class="uk-parent"><i class="uk-icon-star"></i> Parent</li>
<li><i class="uk-icon-twitter"></i> Item</li>
<li class="uk-nav-divider"></li>
<li><i class="uk-icon-rss"></i> Item</li>
</ul>
</div>
</div>
Please Replace this code from your above code.
Here you can use both off-canvas and fixed navbar in responsive design.

Resources