I am currently building a website and I do not want a scroll bar to be shown until a tab is clicked and the content is shown. Currently, when I load the page, a scroll bar immediately appears. The reason why is obvious: the content in the tabs has already loaded but is not shown until the relevant tab is clicked on. Makes sense. I want to remove that scroll bar until the tab is clicked on, regardless of the content having already loaded.
Here's a screen-grab of the scroll bars and the content not being loaded.
Content loaded but not shown; scroll bars active
Here's the relevant code:
HTML
<ul class="nav nav-tabs">
<li>Still</li>
<li>People</li>
<li>Product</li>
<li>Portraits</li>
<li>Street</li>
<li>iPhone</li>
</ul>
<div id="tab-content" class="tab-content">
<div id="people" class="tab-pane fade active">
<div class="row">
<div class="col-sm-12">
<img src="portfolio/people/thumbnails/IMG_1632_thumb.jpg">
<img src="portfolio/people/thumbnails/IMG_2980_thumb.jpg">
<img src="portfolio/people/thumbnails/IMG_5960_thumb.jpg">
<img src="portfolio/people/thumbnails/IMG_6443_thumb.jpg">
<img src="portfolio/people/thumbnails/IMG_6723_thumb.jpg">
</div>
</div>
</div>
</div>
CSS
/*apply styling to the tab-content*/
.tab-content
{
padding-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/*apply style to the rows in the tab-content*/
.tab-content .row
{
padding-top: 3px;
padding-bottom:3px;
}
I will admit that there may not be a way to do this without external libraries, but I thought I'd still ask just in case.
If you are using javascript to switch a tab you can add css properties on the same function.
First you say the body has body{ overflow: hidden } on default. On tab switch function you can add this line: document.body.style.overflow = "auto"; to show the scroll bar
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 have creted this page in html & css. I have a section with a scroll bar inside the page and for small size it appears like this:
enter image description here
I don't want 2 scrollbars to be there so I want to remove the scrollbar of this section for small sizes. Here is my code:
<div class="account-left">
<div class="scroll-area" data-spy="scroll" data-offset="0">
<div class="section">
<!--<h1 style="color:black;">{{hais}}</h1>-->
<div style="text-align: center; background: #eee;">
<span ng-show="tasklist.options.no_tasks" ng-bind-html="tasklist.options.no_tasks.message"></span>
</div>
<ul>
<li >Print smth</li>
<li >Print smth</li>
<li >Print smth</li>
</ul>
<a class="loadmore" ng-hide="1" href="javascript:void(0)" ng-click="loadMore(loadvalue, activeTab)">Load more</a>
</div>
</div>
</div>
Since I have a scroll-area, I cant make it hide-sm because this removes all the area of scrolling and I want to remove only the scroll bar.Is there any way? Thanks.I'm using bootstrap.
After inserted this to my code like in the answer below:
<div class="account-left">
<div style=" width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;">
<div class="section">
//etc the same part of code which is above
My result is this:
enter image description here
But no scrolling
try this in css
your_div { overflow-y: hidden; }
.yourdiv {
overflow-x: hidden;
overflow-y: scroll;
}
.yourdiv::-webkit-scrollbar {
display: none;
}
Assuming that your other styles about div's and containers are correct, this should work.
To know more about this topic visit this link. There is a clear explanation of how browsers work with scrollbars and how can we hide them in a cross-browser compatibility approach. In case of my solution doesn't work, I'm almost sure you will find your solution over the link explanation.
I have two DIVs in a nav bar stacked on top of each other inside container elements so they can slide up and down and have only one row visible at a time. Below is the markup and styles, stripped down to the relevant bits. I'm using Twitter Bootstrap 3 as well.
#searchrap {
height: 38px;
overflow: hidden;
position: relative;
}
#searchrap .slider {
position: absolute;
height: 76px;
}
<nav class="navbar navbar-default navbar-fixed-top" id="miscnav">
<div class="container-fluid">
<div class="navlinks">
<ul class="nav navbar-nav">...</ul>
<div id="searchrap">
<div class="slider">
<div class="links">
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<div class="search">
<form class="form-search" id="siteSearch" action="search" method="get">...</form>
</div>
</div>
</div>
</div>
</div>
</nav>
For some reason, when the page loads, the .slider DIV is positioned ~35px too high. I've tried setting "top:0" but it makes no difference. In Chrome dev tools I can uncheck "position:relative" on the #searchrap DIV in the inspector and that causes the .slider DIV to fall into the right position. Then I can check it again and everything is fine--it doesn't go back up. I can fix the alignment issue by setting "top:35px" but then if I uncheck and recheck "position:relative" it makes it 35px too low and I need to reset "top" to 0. I don't like this solution anyway because I don't understand why 0 isn't the top of the viewport.
You can see it in action here: https://www.tntech.edu/dev/ttu15.interior
The search field, which is on the bottom, starts out visible with the nav links above the viewport. It should start out with the nav links visible and the search field below them. What gives?
Thanks in advance!
I have a page that looks like this:
The Active "SORT BY..." button and the inactive button next to it, I needed to not scroll when I scrolled through the list below it. To accomplish this I have the two side by side button drops down codded like this:
<!-- Start Drop Down Menu -->
<div class="row" style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;">
<div class="col s6">
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1' style="width: 100%;">Sort By...</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>Brewery</li>
<li>Rating</li>
<li>Style</li>
</ul>
</div>
<div class="col s6">
<!-- Dropdown Trigger -->
<a class='dropdown-button btn disabled' href='#' data-activates='dropdown2' style="width: 100%;"></a>
<!-- Dropdown Structure -->
<ul id='none' class='dropdown-content'>
<li>All</li>
<li>Brewery</li>
<li>Rating</li>
<li>Style</li>
</ul>
</div>
</div>
As you can see in the Style part of the above code:
style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;"
I position it and place it fixed so it will not move when I scroll the list below. You may be looking at it and wounder why I have the height 300px when the buttons are not that big...Its because when you click the button it opens a drop down. If I have the height the same height as the button then I can see most of the drop down that open....I thought this fixed my issues but this leads to my current issue. Since the button technically drops down 300px it overlaps the first two entries in the list which makes them not clickable.... causeI am clicking on the transparent css that is covering them up.
For the list, I am adding that into this div with this style:
<div style="height: 35px; position: relative; top:60px; z-index:1;">
<div id="replace"> </div>
</div>
In short, how can I have the drop down buttons pin to their location and still be viewable when opened and at the same time still be able to click on all my entries in my list?
You should not need to set the height of your .row div to 300px. Instead, remove the overflow:hidden style, which is causing your dropdowns to get cut off.
Also, you should be breaking your CSS out into a separate file, to separate style from content.
Finally, I would add that the background should not be transparent - try it, you'll see text scrolling behind the buttons.
.row {
background: #fff;
height: 35px;
width: 100%;
position: fixed;
z-index: 10;
}
I am developing a website and I am attempting to create this kind of layout
I am able to do this using this
HTML
<body>
<div class="d3-d4 m1" id="logoHolder">
<img src="images/payday_logo_long_web.png" alt="Pay Day IRA" />
</div>
<div class="d5-d10 m1" id="navHolder">
<ul id="mainNavigation">
<li>Log In</li>
<li>Contact</li>
<li>Investment</li>
<li>FAQ</li>
</ul>
</div>
<!--BREAK-->
<div class="d1-d2 greenSideBar" id="leftGreenSideBar" >
</div>
<div class="d3-d6 m1" id="employerButton">
Employer
</div>
<div class="d7-d10 m1" id="employeeButton">
Employees
</div>
<div class="d11-d12 greenSideBar" id="rightGreenSideBar">
</div>
<!--BREAK-->
</body>
CSS
/*Green Side Bars*/
.greenSideBar{
background-color:#6EBE44;
height:35px;
}
#rightGreenSideBar{
border-left-width:5px;
border-left-style:solid;
border-left-color:white;
}
/*Employee/Employer Buttons*/
#employerButton{
background-color:#6EBE44;
height:35px;
border-left-width:5px;
border-left-style:solid;
border-left-color:white;
}
#employeeButton{
background-color:#6EBE44;
height:35px;
border-left-width:5px;
border-left-style:solid;
border-left-color:white;
}
The only issue is that this is creating a horizontal scrollbar. Ive narrowed it down to be cause by the
border-left-width:5px;
border-left-style:solid;
border-left-color:white;
of employeeButton, employerButton, and rightGreenSideBar
If I remove this, it has no horizontal scroll bar.
How can I achieve this look without the scroll bar.
I created a fiddle but it doesnt have the same issue.
Fiddle
EDIT
Here is an example I uploaded to my server
Example
You could always throw the elements with a border into a parent div so that the border and content all fit that box instead of allowing them to overflow. Hard to troubleshoot as is without the fiddle showing the bar
add this to the wrapper element which has the scrollbar:
.wrapper { overflow-x: hidden; }
I wrapped your bar area in a div (probably should have something to contain them all anyways), put a max-width: 100%; overflow: hidden; and the bar is gone, with the functionality in place. Sure it may not be the perfect solution but you have stuff like margin-left: -100% going on. personally I would scrap the grid system you are using for that row and just specify the widths using percentages and use media queries to hide the outer blocks.