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>
Related
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>
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.
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.
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
on the site I am currently developing I have a <nav> element containing a 2 leveled <ul>, I am absolute positioning the sub list (nav ul li ul) to the right of the main list.
The problem I am having is when the sub list is longer (taller) than the main list, due to the sub list being absolutely positioned, the element is not stretching to accommodate it. See the below image for an example of what I mean.
My HTML is as follows:
<nav>
<ul>
<li>List 1</li>
<li>
List 1
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
</ul>
</nav><!-- /nav -->
Any idea of a solution to this? Ideally I would like to keep it as a nested list for semantic reasons.
Thanks!
UPDATE:
Please see the following jsFiddle for a working example - http://jsfiddle.net/TcYBQ/
You can't satisfy all your constraints at the same time:
The parent element must have the correct height.
No JavaScript.
In the HTML, "List 2" must be inside "List 1".
To have the correct height on the parent, you can't use absolute positioning on "List 2". Unfortunately, there's then no other way to move "List 2" to where it should be.
Pick from these:
Use JavaScript to set the height and keep the semantic HTML.
Move "List 2" out of "List 1" and avoid JavaScript but sacrifice the semantic HTML.
I'd try to avoid JavaScript for this, unless the rest of the site is highly reliant upon it.
To solve this issue I used a variation of the jQuery in the question linked to by #derekerdmann
var maxHeight = 0;
$('#top nav ul').each(function () {
var tmpHeight = $(this).height() + $(this).position().top;
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('#top nav').height(maxHeight + 20);
}
});