I created custom modal with css :
.backdrop{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: 50;
}
.modal-box{
position: fixed;
top: 5vh;
left: 30vw;
width: 40vw;
padding: 16px;
z-index: 100;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
text-align: center;
border-radius: 15px;
}
when the modal is too high i cant access to the bottom of the model.
which property I missing ?
I think position: fixed is screen fixed..
So, If you want to scroll, You have to change fixed -> absolute.
Your modal's height is longer than the viewport.
Add a bottom attribute to prevent its height to go under the fold and add an overflow attribute so you can scroll within the modal.
bottom: 5vh;
overflow: auto;
Related
.main-page {
width: 90%;
height: 100%;
z-index: 999;
position: relative;
}
.menu {
width: 350px;
margin: 32px 852px 171px 0;
padding: 21px 21px 0px 40px;
box-shadow: 0 3px 18px 0 rgba(35, 41, 62, 0.13);
background-color: #ffffff;
position: absolute;
float: right;
top: -50px;
left: 105px;
border-radius: 8px;
z-index: 9999;
}
{{start component}}
<div class="menu"> </div>
{{end component}}
<div class="main-page">
</div>
We want to display the menu on top of the main page but it is appearing behind parts of the main page when scrolling. How do we put the menu on top of the main page using css?
We have tried using the z-index but that did not work. We also tried adding an opacity to change the stacking context but that did not work either.
Just on top or always pinned to the top when scrolling?
I've just disabled few lines of your css and menu is on top:
.main-page {
width: 90%;
height: 100%;
/* z-index: 999; */
/* position: relative; */
}
.menu {
width: 350px;
margin: 32px 852px 171px 0;
padding: 21px 21px 0px 40px;
box-shadow: 0 3px 18px 0 rgba(35, 41, 62, 0.13);
background-color: #ffffff;
/* position: absolute; */
/* float: right; */
top: -50px;
left: 105px;
border-radius: 8px;
/* z-index: 9999; */
}
https://jsfiddle.net/k25cuax4/
Those two elements are siblings in your HTML code. However, a typical relative/absolute position pair where the absolutely positioned element is on top of the other one has position: relative for the parent element and position: absolute for the child.
So you eiter should change the HTML structure accordingly (i.e. move .menu into .main-page), or you can try to apply a negative z-index to .main-page to move it to the background. (i.e. z-index: -1).
First of all excuse me for explanation if I am not up to the mark, as this is my first post in this platform, Well, I am working on overlay where it has to be shown in right side of the page with given width of say 416px and 100vh of height, but things are getting cut if I do decrease the browser window and as I am decreasing the size of the browser window the button at bottom start appearing on content of overlay which has to remain at bottom even the height is getting decreased, here is the my code as below:
.advanced-overlay {
width: 100%;
min-height: 100vh;
background-color: rgba(35, 0, 18, 0.5);
position: fixed;
z-index: 100002;
top: -41px;
left: 0;
bottom: 0;
.advance-overlay-footer {
display:flex;
justify-content: space-between;
align-items:center;
position: fixed;
right: 24px;
width:156px;
bottom: 24px;
height:6%;
}
.advanced-overlay-content {
position: relative;
// min-height: 83vh;
width: 416px;
margin-top: 108px;
margin-left: auto;
margin-right: 6px;
opacity: 1;
z-index: 100004;
border-radius: 16px 16px 16px 16px;
background-color: #f5f4f6;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.07),
0 19px 18px 0 rgba(0, 0, 0, 0.05), 0 8px 12px 0 rgba(0, 0, 0, 0.05),
0 1px 5px 0 rgba(0, 0, 0, 0.04), 0 0 2px 0 rgba(0, 0, 0, 0.03);
.close-advance-overlay {
position: absolute;
background-color: #fff;
width: 110px;
height: 40px;
display: flex;
border-radius: 20px;
padding: 5px 22px;
top: -18px;
right: 155px;
opacity: 1;
cursor: pointer;
img {
height: 20px;
width: 20px;
align-self: center;
}
.button-text {
align-self: center;
margin-left: 5px;
font-weight: 600;
font-size: 16px;
color: #000000;
}
}
.advnaced-overlay-content-secion {
//min-height:89vh;
width: 100%;
bottom:10%;
// height:100vh;
.select-box {
margin-top: 40px;
margin-bottom: 40px;
}
.accordinan-filter {
margin-bottom: 24px;
}
.accordian-title {
font-weight: 900;
}
.accordian-content {
margin: 0;
font-size: 16px;
}
}
}
}
.is-maximum {
height: 73vh;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 4px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #d3d3d3;
}
}
<div class="advanced-overlay" v-if="toggleFilter">
<div class="advanced-overlay-content">
<div class="close-advance-overlay" #click="toggleAdvanceFilterOverlay">
<img class src="../assets/icons/close.svg" />
<span class="button-text">Close</span>
</div>
<div class="advnaced-overlay-content-secion is-maximum">
<div class="select-box"></div>
<div class="accordinan-filter"></div>
</div>
<div class="advance-overlay-footer">...two buttons</div>
</div>
</div>
So, I what I would like to achieve eventually is that, I want respsonsive overlay at right side of the browser window, provided if I am decreasing height of the browser the buttons at bottom should stay there (fixed position) and content should be within limit of .advnaced-overlay-content-secion
for a responsive design I recommend you to read into the use of grid and espacially for mobile designs also the use of #media breakpoints.
for having some thing to stick at the bottom simply use:
position: fixed;
bottom: 0;
I'm using position:absolute; now i want to make width auto (as per contents) but because of position:absolute; i'm not able to width:auto;
$('.wishlistMessage').text('Your product added to wishlist')
$('.wishlistMessage').show();
.wishlistMessage{position: fixed;
bottom: 25px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 12px 25px;
display: inline;
width: auto;
text-align: center;
border-radius: 5px;
z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wishlistMessage">Your product added to wishlist</div>
An element with position: absolute will fit it's size to the contents. Since you use left: 0 and right: 0 the element is stretched to both sides. Removing one of them (I've removed the right), would fix the problem:
$('.wishlistMessage').text('Your product added to wishlist')
$('.wishlistMessage').show();
.wishlistMessage {
position: fixed;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 12px 25px;
text-align: center;
border-radius: 5px;
z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wishlistMessage">Your product added to wishlist</div>
I'm trying to add a box shadow on two elements, each with variable width. My desired result looks like this:
I've been trying to get to this result with a pseudo element covering the overlapping box shadows, but because they need to have transparency, I can't seem to find a solution in which there are neither small overlaps at the edges of the boxes nor the pseudo element adjusts to the correct width.
The top box does also not necessarily need a top border to solve my problem.
Fiddle
HTML:
<div>
<p></p>
</div>
<div>
<p></p>
</div>
SCSS:
div {
display: inline-block;
margin: 75px;
width: 200px;
height: 50px;
position: relative;
p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
}
&, p {
background: #ededed;
}
}
div:last-child p {
width: 150px
}
div {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
p {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
}
Edit:
Normally I wouldn't consider JS for layout but since in my particular case the boxes won't be visible until a user interaction occurs, I've used a script to solve my problem.
The script figures out if the top element is bigger than the bottom one when the dom is ready and adds a "big" or "small" class to it respectively. By knowing that, we know which element the pseudo-element's width should inherit. As long as the elements don't get resized in a way that would change which element is bigger, this works fine.
There is also a much cleaner solution without the need for JS and one pseudo element less in case one only needs box-sizing blur and no spread.
Fiddles:
Blur and spread combined (JS),
Only blur, no spread (No JS)
The end result is not quite perfect as you can see in this screenshot where all the white background is replaced with black:
When you look at the left box's top left, you can see that the border shadow has a slight curve.
Anyway, it's close enough to me.
If someone finds a solution with a similar result as in the first fiddle using only css, I would really appreciate it.
You have an easy solution for this, but it is an experimental feature and it has limited support.
Using a filter: drop shadow on the base element, the drop shadow applies to the composite result of this element, and all the descendants
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 0,0,0.7));
filter: drop-shadow(0px 0px 2px red);
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach, that will run in any browser, using pseudo elements for the shadows:
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 2px 6px rgba(0,255,0,0.7);
z-index: -10;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach is to clip the shadows. That is poorly suported, and needs lots of manual adjustements, but the end result is probably the best looking.
Demo working only in webkit
div {
display: inline-block;
margin: 75px;
width: 300px;
height: 50px;
position: absolute;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 100px;
width: 200px;
margin: 0px;
}
div, div p {
background: #ededed;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 15px 15px rgba(255,0,0,0.2);
z-index: -10;
}
p:after {
-webkit-clip-path: polygon(0% 30px, 230px 30px, 260px 60px, 100% 100%, 0% 100%);
}
div:after {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 260px 100%, 230px 80px, 0% 80px);
}
<div>
<p></p>
</div>
If you really need a plain color background instead of a background image, this shall work:
I used a div to create the empty area.
<div class="shad">
<div class="cover1"></div>
<p></p>
</div>
<div class="shad">
<div class="cover2"></div>
<p></p>
</div>
The paragraphs are set to same size as div.shad.
div.shad {
display: inline-block;
margin: 75px;
width: 250px;
height: 350px;
position: relative;
background: #ededed;
p {
position: absolute;
top: 0%;
left: 0;
width: 250px;
height: 350px;
}
.cover1 {
position: relative;
float: right;
margin-top: -2px;
margin-right: -2px;
width: 50px;
height: 50px;
background-color: white;
border-left: 2px solid rgba(0, 0, 0, 0.2);
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.cover2 {
position: relative;
float: right;
margin-top: 50px;
margin-right: -2px;
width: 50px;
height: 300px;
background-color: white;
border-top: 2px solid rgba(0, 0, 0, 0.2);
border-left: 2px solid rgba(0, 0, 0, 0.2);
}
}
div.shad {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
I've been struggling with this for the past day and I can't seem to understand (nor fix) this problem.
The problem is that the content overflows the "sidebar" div instead of expanding it, when there's less "main" content than "sidebar" content. (As you can see in the following image).
Here's a JSFiddle!
The #sidebar is position: absolute; since I'm using left: 0; and left: -200; to show and hide the sidebar. The #sidebar-handle is also crucial as I have a click event listener and a hover animation connected to it, for the purpose of toggling show and hide for the #sidebar. (When toggling show and hide I also do change the margin-left of #main.
Does anybody have a solution?
I'm of course searching for a pure CSS solution and a solution which works in the major browsers.
CSS
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
color: #333;
background-color: #EEE;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 50px;
background-color: #303030;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
#header-content {
height: 100%;
}
#sidebar {
width: 210px;
min-height: 100%;
position: absolute;
left: 0;
top: 50px;
bottom: 0;
background-color: #404040;
-webkit-box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
}
#sidebar-content {
width: 200px;
position: absolute;
left: 0;
}
#sidebar-handle {
width: 10px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: #303030;
border-left: 1px solid #272727;
}
#main {
margin-left: 210px;
padding: 30px;
}
ul {
margin: 0;
padding-left: 0;
list-style: none;
}
li {
margin: 0;
margin-top: 16px;
background-color: #AAA;
}
p {
margin-top: 0;
}
HTML
<div id="container">
<div id="header">
<div id="header-content"></div>
</div>
<div id="content">
<div id="sidebar-container">
<div id="sidebar">
<div id="sidebar-content">
<ul>
<!-- lots of li tags for testing -->
</ul>
</div>
<div id="sidebar-handle"></div>
</div>
</div>
<div id="main">
<!-- some random content for testing -->
</div>
</div>
</div>
Remove the bottom: 0 from the sidebar, that limits it to the height of the window.
Remove the absolute positioning on the sidebar-content, so that it's not taken out of the flow. That way it can affect the size of the sidebar.
Demo: http://jsfiddle.net/Guffa/gfu1snhm/3/
I don't know if this has some unwanted effect in some other situation, but it solves this situation, and should help you see why it does what it does.
Remove the line with absolute and set margin:0;