I have navigation bar, filter and collection in one of my layouts in SPA - following in exact that order. Nav bar, filter and collection header must stay on top when scrolling, only collection items must be scrollable. I managed to make the whole collection scrollable, but it's not quite what I want.
<div class="navbar-fixed">
<nav>...</nav>
</div>
<div class="row">...this is filter...</div>
<div id="collection-wrapper">
<ul class="collection">
<li class="collection-item"></li> <!-- serves as header -->
<li class="collection-item"></li> <!-- shows data -->
</ul>
</div>
Using perfect-scrollbar on #collection-wrapper: https://github.com/noraesae/perfect-scrollbar
If you set the max-height of the collection list to specific value that will allow the list to scroll. Setting the position of the first collection-item to fixed will prevent that item from scrolling with the rest of the list.
ul.collection {
max-height: 100px;
overflow: scroll;
list-style-type: none; /* not sure if you need this. Hides bullet list dots */
}
li.collection-item:first-child {
background-color: white; /* should be the same as the background color behind the list */
position: fixed;
}
Related
I have a tab with long content in the project (StackBlitz ref is here).
So the scroll appears.
The corresponding code for it is
<div class="content-container">
<div class="content-area">
<clr-tabs>
<clr-tab>
<button clrTabLink id="tab1-link">Tab1</button>
<clr-tab-content id="tab1-content" *clrIfActive="true">
...
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="tab2-link">Tab2</button>
<clr-tab-content id="tab2-content" *clrIfActive>
Content2
</clr-tab-content>
</clr-tab>
</clr-tabs>
</div>
</div>
The problem is that the scroll covers tab labels and tab content. But I need it to cover only tab content so the tab labels would stay if I scroll down.
I tried to add the following styles to fix it
.content-area {
overflow: hidden !important;
height: 100%;
}
#tab1-content, #tab2-content {
height: 100%;
overflow: auto;
}
But this resulted in scroll disappearing at all. How can I add the scroll only for a tab content?
I'm afraid I couldn't work out enough from your code snippet so looked at the code in Stackblitz. In that, Tab1 and Tab2 are list elements in an unordered list with class nav.
Moving this nav ul out of the content-container div and putting it immediately below the header-2 header element gives you what I think you need, the content-container div fills up the remainder of the main container and scrolls with the Tab list elements remaining fixed above.
This may just be luck - in that all the required flex-related settings are already in place.
I found the following solution.
I need to add to parent component content-area which contains all tabs the overflow property.
.content-area {
overflow: hidden ;
}
It removes the current scrollbar.
After that we can found the height of above elements using Chrome Dev Tools.
Now we should wrap the tab content into another div with some class (e.g. mytab-content).
<clr-tab-content id="tab1-content" *clrIfActive="true">
<div class="mytab-content">
.......
</div>
</clr-tab-content>
And finally we should add the following styles for that class
.mytab-content {
height: calc(100vh - 60px - 36px);
overflow: auto;
}
It will add scroll only for tab content.
I'm trying to create a fullscreen map with leaflet and a purecss horizontal menu on top of it.
Here is a solution for making the map height 100% (set parent elements also to 100% height).
So right now, I've got something like this:
<!-- Menu -->
<div class="pure-menu pure-menu-horizontal">
map
<ul class="pure-menu-list">
<li class="pure-menu-item">About</li>
<li class="pure-menu-item">Contact</li>
</ul>
</div>
<!-- Map -->
<div id="map"></div>
CSS
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
The problem is: the page height ist 100% + the height of the menu. So parts of the map get cut off at the bottom.
I used Firefox' Inspector and changed various CSS settings to no avail. I also tested different browsers to exclude a problem with Firefox. What am I missing? Unfortunately I'm not a CSS guy..
I created a JSFiddle: http://jsfiddle.net/jygzLf3v/13/
The result window is scrollable for the height of the menu but should be "fullscreen" including the menu.
Thanks for some insight.
Sounds like you could use #map {height:calc(100% - $HEIGHT_OF_MENU);} on your map container to size things up properly, and not have any cutoff.Don't forget to add 'px' after your menu height.
You cand simply add overflow: hidden to your body element, in the stylesheet.
http://jsfiddle.net/jygzLf3v/14/
I want to make horizontal list of divs that is clickable.
I got something like this:
<div id="header">
<ul id="list">
<li id="column1">
<div></div>
</li>
<li id="column2">
<div></div>
</li>
</ul>
</div>
Styles:
#header
{
height: 200px;
width:500px;
}
a{
display: block;
width: 100%;
height: 100%;
}
The problem is,an "a" element not in the same place as list, and I want the list to be cliackable.
If you want anything to be clickable on your page use javascript event listeners not anchor tags.
When you want an element to be clickable just add an event listener to click action on your client code and define the behaviour of your object.
Use anchor tags only if your object's behaviour is to link to another place.
This will make your code cleaner and easier to read, it will also be easier to place every object where you want it to be.
I am using angular and css for sliding page transitions, and had a nice working version of transitions similar to this plnker. This worked ok but the css was using 'absolute' which took the element in question out of the flow of the page, hiding the rest of it - namely the footer.
The content of what is being transitioned in varies page to page. The footer is hidden because the many parents of the content being displayed have height 0px;
So I removed absolute and now the transitions happen something like this, where the divs are again in the flow of the page, but when transition are floated above and below each other.
I can use transitions to make the new div enter at the same level as the exiting div by changing
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,0,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,0,0);
}
to
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,-100%,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,-100%,0);
}
as shown in this plnker. However, the issue is that the div height is still affecting the page, so you can see a vertical scroll bar as the new div enters and the rest of the page is affected.
The divs which enter the page can be different heights, so I don't think simply setting a defined height on a parent div and setting overflow-y: hidden is an option.
Here you go. i edited the first fiddle you posted. Styling is inline because I couldnt be bothered changign the css but you get the drift.
<nav>
<a ng-click="go('/page1', 'slideLeft')">Page 1</a>
<a ng-click="go('/page2', 'slideRight')">Page 2</a>
<a ng-click="go('/page3', 'slideDown')">Page 3</a>
<a ng-click="go('/page4')">Page 4</a> <!-- note: no transition specified -->
</nav>
<!-- App Content Container -->
<div class="page-container">
<div ng-view="" class="page-view" ng-class="pageAnimationClass"></div>
</div>
<footer>
<div style="height: 50px; width:100%; position: fixed; bottom: 0; display: block; background: white; "><br>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</div>
</footer>
The example you posted uses a fixed position header with an absolutely positioned full screen content area. The content actually moves right and left underneath the header and the footer i added.
There are other ways to do it but fixed headers and footer generally work well with web apps.
if you wanted a dynamic footer, you would need to restyle your content area. I would center your header and footer items with a margin: 0 auto and make the content full width, with a centered div inside it that is the animated element. It should slide left and right as you intend without breaking your footer.
Keep in mind though that if you transition in items of differing height your footer will jitter as it repositions itself. Maybe consider adding a callback animation on your footer that fades it out and in again whenever the page transition animation plays and stops.
I have a div which contains an unordered list... After some user actions i load the div with a longer list i.e. containing more list items than the previous one. I use jquery's higher level ajax functions to do this.
The problem is when i load it through ajax the list elements overflow the div's bottom portion and some of them get's displayed out of the div.
I haven't set any heights for the containing div assuming that it will expand to accomodate any future longer lists.
I'll post the code below and will be extremely grateful if someone figures this out....
#sidebar1 {
float: left;
width: 15%; /* since this element is floated, a width must be given */
background: #FFE8BF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
text-align:center;
}
<div id="sidebar1">
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>
<a href="#" id="loadHotel" >
HOTEL
</a>
</li>
<li>
<a href="#" id="loadCountry">
COUNTRY
</a>
</li>
<li>
<a href="#" id="loadCity">
CITY
</a>
</li>
</ul>
</div>
</div> <!-- end #sidebar1 -->
I load the list elements into the <ul id = "sidebarmenu1">
Hope i'm clear...
Thanks a lot in advance....
have you tried:
$('ul#sidebarmenu1').removeClass('class here').AddClass('class here');
that should work
Figured out a workaround for the curvy corner problem...!!!
after i load the menu items with ajax, i use jquery to increase the height of the div and then call curvy corners to round the edges...!
Voila..!!!!