I have a div element that wraps items in it
<div id="#wrapper" style="overflow: scroll; max-height: 100%;">
<ul>
<!--lots of li's go here.
When an li is clicked, "#details" pop from below.
-->
</ul>
</div>
<div id="#detils" style="display:none; height:30%;">item details</div>
Since there might be lots of items, the div has:
max-height: 100%;
When an item is clicked, details section should pop from below.
Its height is 30%.
How can I make the div wrapper scrollbar height automatically adapt to the new situation in CSS only. In other words: its height should now change to 100%-70%=30%
You can add a class which has height:30; when the item is clicked.
I hope this can help you.
Related
I have a top nav, side nav and the main content of the page. On click, the tabs on the side nav should bring the div associated with the tab to the top of the page (This is a different issue i am facing as scrollTop method from JS isn't working, but I am able to use scrollIntoView() for now to get something going)
template
<mat-card class="main-card">
<mat-card-title>Some title</mat-card-title>
<mat-card-content class="main-content">
<div class="div1">Div1 content</div>
<div class="div2">Div2 content</div>
<div class="div3">Div2 content</div>
</mat-card-content>
</mat-card>
CSS
.main-card {
overflow: auto;
height: 700px;
}
.main-content {
height: 1000px;
overflow: auto;
}
sidenav items
<div class="side-nav">
<div class="mat-list-item" (click)="handleElemScroll(div1)">
<span>Div1</span>
</div>
<div class="mat-list-item" (click)="handleElemScroll(div2)">
<span>Div2</span>
</div>
<div class="mat-list-item" (click)="handleElemScroll(div1)">
<span>Div2</span>
</div>
</div>
on the main card, I am unable to add the height prop to, even if I use !important. I've run into this issue with a few other times using angular-material. I am forcing a scroll, but mid way through the scroll, the entire page begins to scroll. Even though the height of my mat-card-content is set to be larger than the mat-card itself.
A few questions if anyone can guide me
1. Why does my entire page begins to scroll mid way?
2. Without making my side and top nav stick, how can I implement a scroll? Is my idea of using overflow, and making the inner container height larger than its parent container the correct idea here?
Thanks for any help
I’m having trouble getting one div not to lie on top of another div. I have the following
<div id="navbar">
<div id="leftNavSection"></div>
<div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>
with the accompanying CSS …
#rightNavSection {
float: right;
}
However, when I add this div underneath, it lines up on the same vertical plane as the nav div.
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>
Here is the JSFiddle that illustrates the problem — https://jsfiddle.net/z4rw9qj1/ . If I add a fixed height to the nav div (e.g. “height: 10px;”), then the overlay doesn’t happen, but I don’t want to add a fixed height because if someone adjusts their browser font size, or I add other elements, then the look is broken. Is there a way I can get the lower div not to trample the upper div?
That's because of float: right and you can fix that if you add overflow: hidden on header DEMO
header {
overflow: hidden;
}
Have you tried the z-index property ? It is a property that decides what order are the elements aligned in the "front-back" axis.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a fixed container in which I placed a list (ul) with dynamic number of items.
at the top of the container there's a title.
It seems that the presence of the title messes the list scroll. i.e. one cannot scroll to the last item on the list, since the bottom part of the list is pushed below the view port.
My HTML & CSS (skeleton) is at http://jsfiddle.net/brjwjn2L/2/ where you can notice the scroll issue.
my HTML:
<div class="menu-wrap">
<div style="height:100px">
<div>my items</div>
</div>
<div class="menu">
<div class="icon-list">
<ul>
<li class="playerBox">
<div class="topRect">
item 1
</div>
</li>
<!-- unknown number of items -->
<li class="playerBox">
<div class="topRect">
item n
</div>
</li>
</ul>
</div>
</div>
</div>
I'd appreciate any hint as for how can the list scroll bar be shown so that user could scroll all the way to the last item.
Thanks
Idan
Is changing your .menu-wrap's CSS from
position: fixed;
to
position: relative;
an option? It does fix the scrolling problem, but it might change your layout.
You could also try
position: absolute;
though it doesn't seem to display correctly.
EDIT: Since that isn't an option, change the height style of your title div to percent say 15%:
<div style="height:15%">
<div>my items</div>
</div>
and then change your menu height to fill the REST of the percentage (not 100%):
.menu {
height: 85%;
overflow-y: auto;
}
The problem is that both the title div and the menu div have the same container parent. So since the title div was taking up 100px, that 100px was removed from the menu's 100%.
I've this dropdown, to make it work, i see only one solution is taking off the overflow, but if i take it it stays like this:
but if i apply an overflow: hidden it stays like this:
How can i make this work. I've tried to apply overflow: hidden; in other div but dosen't work.
Link to website: http://store01.titus.biz/
<div class="span12 horizontal-category" style="overflow: hidden">
<span class="carousel-prev disabled" id="carousel-category-prev"></span>
<ul class="nav myCustomNav">
<li class="dropdown"></li>
... </ul>
</div>
You could try to use clipping. First remove the overflow on div.span12.horizontal-category. Then add a clip rect on the div that is between the 2 control buttons #carousel-category-prev, #carousel-category-next. The position of absolute is required to use clipping however. But this should be fine.
<div class="span12 horizontal-category">
<span id="carousel-category-prev" class="carousel-prev disabled"></span>
<div style="position: absolute; clip: rect(auto, auto, 500px, auto);"></div>
<span id="carousel-category-next" class="carousel-next"></span>
</div>
This should clip the overflow on the left and right. Then increase the bottom (500px) to whatever value you need it to be. Clipping is a way to control how the overflow works.
I have a try, first make the ul have enough height to display the dropdown menu, then apply margin-top: -xxxpx to the element below the ul.
I test the follow code in my Chrome:
edit margin-bottom: 200px; to .horizontal-category ul
add margin-top: -180px; to .ei-slider
This way don't need CSS3 , so it's more compatibility. Test it!
This will maybe help you:
Remove overflow:hidden from class="span12 horizontal-category".
Add overflow:hidden to class="main-container".
And you could give control buttons, like ../img/button-prev-disabled.png a white background, so you can't see the corners of the menu when it slides to left and right.
I have the following code:
<div style="height:500px">
<ul style="height: 1000px">
....
</ul>
</div>
I am using the UL as Jquery carousel.
My problem is that the div won't act as a 500px window above that UL carousel,
and it seems like its streching the DIV so it will also fit the 1000px.
How can this be solved?
thanks
try <div style="height:500px; overflow: hidden">
Its hard to tell whats happening aside those two code lines but you would also need to set in the css that the div should have overflow hidden so that no content will flow over the height