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;
}
Related
There is a slideshow on my webpage. Within this slideshow, I have added a button. I want this button to only show up on slide 1. I want a different button at a different position and size to show up on slide 2. However, the button shows up on all slides. How can I cause the button to only show up on one slide?
I have tried to create seperate id's for each button tag on my HTML document, and then create seperate styling for each button. However, all of the buttons are shown all of the time, regardless of which slide I am on.
For example, the first slide should look like this:
enter image description here
The second slide should look like this:
enter image description here
I have used this HTML code:
<div class="swiper">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="images/banner-1.jpeg">
</div>
<div class="swiper-slide">
<img src="images/banner-2.jpeg">
</div>
<div class="swiper-slide">
<img src="images/banner-3.jpeg">
</div>
<div class="swiper-slide">
<img src="images/banner-4.jpeg">
</div>
<div class="swiper-slide">
<img src="images/banner-5.jpeg">
</div>
</div>
</div>
<button id="button">Shop Now</button>
</div>
I have used this CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.swiper {
width: 100%;
height: fit-content;
position: absolute;
}
.swiper-slide img {
width: 100%;
}
#button {
position: absolute;
z-index: 1;
top: 350px;
left: 850px;
font-size: 30px;
}
Put the button within the first swiper-slide, set some id to the first swiper-slide, and CSS would be #yourID {possition:relative;} .button{possition:absolute;}
Follow by more styling, but this will make your button be fixed only within the first slide. Just make sure you set the styling to ID of your first slide and button, to avoid some trouble in the future.
I've been using this demo to create a sidebar menu.
I wanted to add a button at the bottom of the sidemenu; but the problem is that as the list is expanded the button does not move with the scrollbar. i.e it overlaps
The html part
<div class="logout">
<li>
<a>
<i class="glyphicon glyphicon-off"></i> LOGOUT
</a>
</li>
</div>
The css part
.nav-side-menu .logout{
position: absolute;
bottom: 0;
width: 300px;
}
On the assumption it is a responsive menu and you don't know the height of the user's screen and want it to fill the height entirely, this is how I would change your snippet:
https://bootsnipp.com/user/snippets/Ez3RD
This worked for me on the link you provided. Just place the div OUTSIDE of the last UL tag.
HTML
<div class="bottom-icon">
<button style="height:30px; width:100px; background-color:#2888ff; color:#fff;">Hello World</button>
</div>
CSS
.bottom-icon {
text-align:center;
padding-top:30px;
}
You just need to add div tag below the last li tag. and It works successfully there no overlap.
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've created custom drop down menus that have one <div> holding the current value and acting as a <select> field and another below it that gets displayed when the top one is clicked, holding all the <option> values.
The design requires the bottom <div> to position slightly below the upper one (weird rounded corners, etc) so I used z-index to achieve that. It all works until the moment I have two drop down menus close to each other. If you click the upper one the drop down option list is displayed but it goes below the second drop down menu as well which is highly undesirable. Here's simplified version in a jsfiddle:
jsFiddle
As you can see, the first drop down menu is fine but the second one is hidden below the third one. Any ideas how can I achieve this so the second menu works as well? May be without using z-index somehow?
First, wrap each menu in an element. I used a div.container.
Since only one menu is going to be open at a time, simply changing the z-index of the .major and .minor elements in each container (on hover in my example) works correctly:
.major {
position: relative;
width: 100px;
background-color: red;
z-index: 1;
}
.minor {
position: absolute;
width: 150px;
background-color: blue;
padding-top: 10px;
margin-top: -10px;
z-index: 0;
display: none;
}
.container:hover .major {
z-index: 5;
}
.container:hover .minor {
display: block;
z-index: 4;
}
.moveup {
margin-top: -25px;
}
<div class="container">
<div class="major">
First one fine
</div>
<div class="minor">
Option part goes here Option part goes here Option part goes here
</div>
</div>
<br />
<br />
<br />
<br />
<div class="container">
<div class="major">
Second menu
</div>
<div class="minor">
Option part goes here Option part goes here Option part goes here
</div>
</div>
<div class="container">
<div class="major">
Third menu
</div>
<div class="minor">
Option part goes here Option part goes here Option part goes here
</div>
</div>
I'm not 100% sure what you mean, but if I'm not wrong, the solution should be to wrap the .major and .minor divs so they don't overlap each other, like so:
<div class="dropdown">
<div class="major">
First one fine
</div>
<div class="minor">
Option part goes here
Option part goes here
Option part goes here
</div>
</div>
See my fork of your JSFiddle: https://jsfiddle.net/jk1dn4yx/
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!