I have a div which represents a basket for an e-commerce website. This div is absolute positioned and fades into the screen when the user clicks the basket icon. I have deactivated the main page's scrolling so that the sole focus is on the basket div once it emerges onto the screen.
What I am having a problem with is this; if the user adds enough items to the basket, the div expands in height, off the screens view, and the user can not scroll down to view all items in the basket. The items are added to the basket through a click event.
I want the div to be restrictred to a certain height. But because it is an absolute positioned element, I do not know how exactly to go about adding a scrolling feture. I have added a parent div with the position of relative but that still doesnt work.
Thanks for the helpful responses in advance!
CODE:
#bakset-container {
position: relative;
height: 400px;
overflow: scroll;
width: 100%;
}
#basket-content {
z-index: 10000;
font-size: 1em;
color: black;
width: 80%;
left: 10%;
position: absolute;
background-color: white;
top: 10%;
}
#basket-content ul {
display: flex;
margin: 2em;
justify-content: space-around;
padding-bottom: 0.5em;
width: 90%;
}
#basket-content ul li {
width: 30%;
padding: 0.2em;
text-align: center;
}
#basket-headings {
letter-spacing: 0.1em;
}
#basket-headings li {
background-color: #346b25;
padding: 0.2em;
color: white;
width: 30%;
}
#basket-content {
display: none;
}
#basket-content .shopnow {
display: block;
margin: auto;
margin-bottom: 1.5em;
width: 40%;
font-size: 1.1em;
}
<div id="basket-container">
<div id="basket-content">
<h1>YOUR SHOPPING BASKET</h1>
<ul id="basket-headings">
<li>PRODUCT</li>
<li>QTY</li>
<li>SUBTOTAL</li>
</ul>
<button id="checkoutcomplete">COMPLETE ORDER</button>
<span class="close-window">CLOSE WINDOW</span>
</div>
</div>
I have added an image of what the problem looks like. As you can see, my 'complete order' button is going beyond the screen. If I add one or two more products to the div, it will expand, the user can not scroll down to view the button or the rest of the content.
Try adding max-height of calc(100vh - 10%) to your identifier basket-container with a overflow: scroll. It should be working fine.
#basket-container {
max-height: calc(100vh - 10%);
overflow: auto;
}
Related
I have an element which has overflow: scroll both on y and x axes, however when the element is on mobile version it has a weird touch behavior, it allows the user not only to move the element horizontally and vertically, but also to any other direction, like diagonally, for example.
I'd like to make it respect the axes and only move up-down/down-up and right-left/left-rigth.
How could I fix this?
I added a snippet, but I got this example from Css Tricks. It can be seen on mobile version with multiple versions of touch-action, none of them satisfied what I need to do.
body {
display: flex;
flex-wrap: wrap;
}
.map {
margin: 1rem;
width: 300px;
height: 300px;
overflow: scroll;
position: relative;
margin-bottom: 15px;
}
.map img {
width: 1200px;
height: 1200px;
}
.map-desc {
position: absolute;
width: 100%;
text-align: center;
font-weight: bold;
top: 130px;
font-size: 24px;
}
.touch-auto {
touch-action: auto;
}
<div class="map touch-auto">
<img src='https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<code class="map-desc">touch-action: auto;</code>
</div>
I'm making a slide oriented website, similar to a how a parallax site would operate, but so far no js, just css, and obviously no delayed scrolling because there is so far no js.
I am working on the first two slides. On the first slide I have my header and nav at the top, an empty section that was used for an affect with css that uses gradient and transparency and a picture that covers the viewport.
On the second slide, I have a section that represents all of slide2, which contains a different picture that covers the viewport, and some text that's identified by its own div and has a background color and text.
Here's the problem. I was able to get the background-color to stay fixed by using background-attachment and the background-position: top-left of the screen, height: 100%; and width: 15%; This keeps the background from scrolling, but this does nothing for the text.
I need to inhibit the text from scrolling as well, so that its position on the background doesn't change. So instead of the text scrolling onto the background, it's more like a curtain rising and revealing the text underneath.
I've tried position:fixed, but this ruins the transparency affect of the empty section on slide 1, and for some reason ignores any z-index I give it and remains on top of any subsequent slides (oddly, it obeys the z-index of the header, the empty section and the img that make up slide one).
Can I do this with css? I don't know js yet, but I'm learning it, and I know its used often for scrolling affects. So if the only fix is js, I'm not against using it, I just won't understand it atm.
Here is the simplified code:
HTML5
<html>
<head>
</head>
<body>
<div id="headerContainer">
<div id="containerRow">
<header id="home">
<img id="logo" src="images/logo/MASKAUTONOMY.png" alt="Logo" style="height:75px; margin:25px 0px 0px 25px; padding:0;">
</header>
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
</ul>
</nav>
</div><!--End containerRow-->
</div><!--End table headerContainer-->
<section class="ribbon">
</section><!--Section left blank to make ribbon with gradient affect-->
<Section class="slide1">
<h1>Company Slogan</h1>
</section>
<section id="about" class="slide2">
<div id="slide2Text">
<h1><span>Mask</span> Autonomy</h1>
<p class="companyInfo">Some stuff
</p>
<p> some more stuff.
</p>
</div><!--End of slide2Text-->
</section>
<section id="services" class="slide3">
<ul>
<li>List of things we do
</li>
<li>More things we do
</li>
</ul>
</section><!--End of slide3-->
</body>
</html>
css
body {
padding: 0px;
}
#headerContainer {
height: 10vh;
width: 100%;
margin: 0px;
padding: 0px;
display: table;
position: relative;
z-index: 999;
background-color: #e1e3e9;
}
header {
display: table-cell;
}
nav {
margin: 0px;
padding: 0px;
display: table-cell;
width: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
nav ul li {
margin-right: 0px;
padding-right: 25px;
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 1.2vw;
font-family: arial;
}
nav ul li:last-of-type {
margin-right: 47px;
padding: 0px;
}
.ribbon {
position: relative;
height: 4vh;
width: 100%;
background-color: #e1e3e9;
z-index: 998;
}
.slide1 {
color: #e0e0e0;
height: 86vh;
background-image: url(../../Documents/DOCS/Stycorp/Website/Images/bckgrnd.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
overflow-x: hidden;
margin-bottom: 0px;
padding: 0px;
position: relative;
z-index: 997;
}
.slide1 h1 {
position: relative;
top: 60%;
left: 47px;
font-size: 4vh;
}
.slide2 {
position: relative;
height: 100vh;
background: url(images/Charlotte.jpg) no-repeat center center fixed;
background-size: cover;
z-index: 989;
}
#slide2Text {
position: static;
background-color: #7d8e9e;
background-attachment: fixed;
background-position: left top;
height: 100%;
width: 15%;
text-align: center;
font-size: 2.33vh;
}
#slide2Text h1 {
position: relative;
top: 2.5%;
font-weight: normal;
text-transform: uppercase;
}
#slide2Text span {
color: #a9aba5;
font-weight: normal;
text-transform: uppercase;
}
.companyInfo {
color: #e0e0e0;
}
.slide3 {
position: relative;
z-index: 994;
height: 100vh;
}
Ok, maybe not that abbreviated. Sorry. Any ideas how to get the text on slide two to remain on the background-attachement:fixed portion of slide 2 during scrolling without messing up the transparency affect on slide one and allowing slide3 to scroll above slide2?
So I figured it out on my own. Funny, how simple the answer was. All I did was make a second container within the "slide2Text" container that contained the same inline text elements elements, I identified it as "text," and used css to style the background of "slide2Text", and css to fix the text position of "text."
I'm not sure if I like the result as much as I thought I would, but maybe I can use some javascript or css to make the text transition from invisible to visible as the slide scrolls into view.
If anyone wanted to see the code or doesn't understand my answer, just ask and I'll post it. Again, it was a simple fix.
There are 2 img div's on top of each-other, next to a fluid header logo (.svg) also in a div.
The HTML:
<header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div class="wrap"><div id="menu_container"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/Hamburger_optimized.svg" alt="menu" class="menu-btn" /><div class="menu_spacer"></div><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/searchicon.png" alt="zoek" class="search_icon" /></div>
<div class="title-area"><h1 class="site-title" itemprop="headline"></h1></div><div class="vr_menu_logo"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/logo_VR_font.svg"></div>
</div></header>
The CSS:
.vr_menu_logo{
max-width:95%;
float:left;
margin-right:20px;
}
#menu_container {
max-width: 5%;
float: right;
}
.menu-btn{
cursor: pointer;
max-height: 30px;
max-width: 30px;
margin-top:2em;
}
.menu_spacer{height:4em;}
.search_icon{
cursor: pointer;
max-height: 24px;
max-width: 24px;
}
.site-header .wrap {
width: 1260px;
}
.site-header .wrap {
margin: 0 auto;
padding: 0;
float: none;
overflow: hidden;
}
Goal:
Scaling the browser window would keep the small hamburger and the search icon's on level with respectively the top and bottom of the logo. Actually the 3 seperate items should act as one logo.
Check the cssdesk here: http://www.cssdesk.com/JDyYQ
I was hoping a spacer div with a max-height would do the trick, or display:table-cell;
But I can't get it to work, anyone have an idea? (javascript can be an option too, but this must be possible with CSS I would think...)
here is an example using flexbox - note in the fiddle that the two div are exactly the same apart from having a different height. This should help you getting what you are trying to achieve. Obviously check what kind of browser support you need to provide as flexbox is a relatively new technology.
http://jsfiddle.net/zn50mmnu/
html:
<div class="flexy f1">
<span class="menu">M</span>
<span class="search">S</span>
</div>
<div class="flexy f2">
<span class="menu">M</span>
<span class="search">S</span>
</div>
css:
.flexy {
float: right;
clear: both;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px solid red;
margin: 10px;
}
.f1 {
height: 50px;
}
.f2 {
height: 90px;
}
.menu {
background: red;
width: 1em;
}
.search {
background: blue;
width: 1em;
}
I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.
When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?
Here's my testing website if you want to see what I'm talking about exactly: http://mywptestsite.is-great.org/page-height-and-sidebar/
#primary {
float: left;
clear: none;
max-width: 70%;
margin-right: 22px;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
width: 100%;
padding: 0 20px 0 50px;
}
.site-main #tertiary {
float: right;
clear: none;
width: 256px;
position: static;
height: auto;
}
.site-main .widget-area {
padding: 30px 20px 0 0;
float: none;
width: 100%;
}
I would use display: table and table-cell for that.
JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/
HTML
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS
#container {
display: table;
width: 70%;
margin: 0 auto;
}
#content, #sidebar {
display: table-cell;
}
#content {
max-width: 70%;
border: 1px solid blue;
}
#sidebar {
width: 254px;
border: 1px solid red;
}
i'm under this situation... i've made an overlay div working as a popup window.
Contains a little header that has some text and a "X" button to "close" it (which is a child div). Then it has the body content as another child div.
I've set the draggable and re-sizable jquery functionality to the parent overlay popup window.
Works fine... sort of speak, because when i scroll down due to large content, the little handler resize icon moves up or down depending on how I scroll instead of being fixed at the bottom like where it was in the first place.
And another thing, the little child divs inside its parent aren't resized with the parent's size. How can i achieve that?
This is my HTML code:
<div id="sendmessage-panel-overlay">
<div id="overlay-header">
<h1 id="title" style="font-size: 12px; float: left; padding-top: 7px;"></h1>
<div id="maximize_icon">
<img src="<c:url value='/images/x-icon.gif'/>" title="Close window" onclick="closePopUp()">
</div>
</div>
<div id="body-content"></div>
</div>
And this is the CSS:
#sendmessage-panel-overlay
{
background-color: white;
border-color: gray;
border-style: solid;
border-width: 1px;
float: left;
height: 500px;
left: 21%;
padding: 0px 17px 17px;
position: fixed;
text-align: center;
top: 10%;
visibility: hidden;
width: 700px;
overflow: auto;
}
#overlay-header
{
width: 700px;
position: fixed;
height: 30px;
background-color: #fff;
}
#maximize_icon {
width: 16px;
height: 16px;
float: right;
}
#body-content {
padding-top: 50px;
padding-left: 10px;
display: inline-block;
}
Either move the element outside of the scroll-able element or use position: absolute (probably combined with a position: relative somewhere).