I know that fixed positioning does not work relative to the parent, only to the browser window and the solution is absolute, but I also have a problem with that.
In the div in which I need a scroll inside, I have to put the icon always visible in the bottom right corner.
My fiddle: https://jsfiddle.net/nck7o0jL/
Below is my code.
.big {
height: 600px;
width: 600px;
border: 2px solid black;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
position: relative;
resize: both;
}
img {
width: 30px;
height: 30px;
position: absolute;
right: 15px;
bottom: 15px;
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
As you can see, by stretching the div.small the icon is held, but during the scroll it is not.
Will someone give a helping hand?
You can approximate this using flexbox and position:sticky
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big {
height: 600px;
width: 600px;
flex-shrink: 0;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
resize: both;
display: flex;
}
img {
width: 30px;
height: 30px;
margin: auto 0 15px auto;
position: sticky;
order: 1;
right: 15px;
top: calc(100% - 45px);
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
Related
I need to make a border a little different in some cards for a component that I'm developing, but I'm not finding a good solution for a border like this, follow the need in the image below.
yes you can make it using before & after pseudos' in CSS
here is example: https://codepen.io/anoopkumarseth/pen/MWQNXWb
.image_outer {
border: 1px solid red;
padding: 50px 80px 50px 30px;
background: #f1f1f1;
width: max-content;
}
.image {
position: relative;
height: 600px;
width: 300px;
}
.image:before, .image:after {
content: "";
height: 100%;
width: 100%;
border: 5px solid;
display: block;
position: absolute;
top: 15px;
left: 30px;
}
.image:after {
top: 30px;
width: calc(100% + 30px);
}
.image img {
display: block;
position: relative;
z-index: 999;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="image_outer">
<figure class="image">
<img src="https://images.unsplash.com/photo-1656004035327-593b0d1818ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=742&q=80">
</figure>
</div>
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I'm trying to make a rectangular div that's 95% the width of the viewport and 20% high. But I want another rectangular div inside of that, that is vertically and horizontally centered with a slight2px margin.
.Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
}
It depends upon requirements. But according to question, here is the answer. Please take a look and let me know in case of any issue
.Outer {
width: 95vw;
height: 20vh;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Inner {
border: 1px solid hotpink;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
<div class="Outer">
<div class="Inner"></div>
</div>
Tried to use relative measuring units just in case you are dealing with a responsive design. The .outer box is display: table and the Inner is display: table-cell. They sit perfectly together and the 2px margin your requested is provided by a 2px padding from .Outer
html {
box-sizing: border-box;
font: 500 16px/1.428'Consolas';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100%;
width: 100%;
}
.Outer {
position: absolute;
top: 20%;
left: 3%;
outline: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: table;
padding: 2px;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
display: table-cell;
}
<section class="Outer">
<section class="Inner"></section>
</section>
I'm not 100% this is what your looking for because this has Magic Numbers, but here is a JSFiddle of what I came up with using your provided code.
#Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
position: relative;
}
#Inner {
border: 1px solid hotpink;
width: 95%;
height: 50%;
position: aboslute;
margin-top: 5vh;
margin-left: 2.5vw;
}
<div id=Outer>
<div id=Inner>
</div>
</div>
JSFiddle
Hopefully this helps and you could mess around with it to use percentages on the viewpoints instead of magic numbers.
When I want to center a div vertically, I have a couple classes that help me to do it.
.outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.inner {
border: 1px solid hotpink;
width: 95%;
height: 90%;
margin: auto;
}
.valign-wrap {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.valign-wrap .valign {
display: block;
}
<div class="outer valign-wrap">
<div class="inner valign center"></div>
</div>
JSFiddle
I always recommend add these classes to your projects, they are very useful. Good luck!
I am trying to crate a vertically centered dialog with variable height. I'm using a technique with span element with height: 100% and vertical-align:middle within the container.
Now the dialog box has a max-height:80% set on it so that it doesn't take up the entire height of the container if it becomes small. When the container becomes small, the content are becomes smaller as well but I cannot get the content area to become scrollable when this happens..
Here is a simplified version in a fiddle.
HTML:
<div id="main">
<div id="overlay">
<span id="mickey-mouse"></span>
<div id="overlay-inner">
<div id="overlay-title">Title</div>
<div id="overlay-content">
<div id="content">MAKE ME SCROLL!</div>
</div>
</div>
</div>
</div>
CSS:
body, html {
position: relative;
width: 100%;
height: 100%;
position: relative;
background: yellow;
padding: 0;
margin: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: aboslute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
#mickey-mouse {
display: inline-block;
height: 100%;
width: 0;
margin-right: -0.25em;
vertical-align: middle;
}
#overlay-inner {
text-align: left;
display: inline-block;
vertical-align: middle;
max-height: 80%;
max-width: 300px;
width: 80%;
background: white;
overflow: hidden;
}
#overlay-title {
padding: 1em;
height: 14px;
background: #eee;
}
#overlay-content {
padding: 1em;
/* HOW TO MAKE THIS SCROLLABLE? */
}
Here goes your fiddle code
fiddle
Here's the modified css
body, html {
position: relative;
width: 100%;
height: 100%;
position: relative;
background: yellow;
padding: 0;
margin: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: aboslute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
#mickey-mouse {
display: inline-block;
height: 100%;
width: 0;
margin-right: -0.25em;
vertical-align: middle;
}
#overlay-inner {
text-align: left;
display: inline-block;
vertical-align: middle;
max-height: 90%;
height: 90%;
max-width: 300px;
width: 80%;
background: white;
overflow: hidden;
}
#overlay-title {
padding: 1em;
height: 5%;
background: #eee;
}
#overlay-content {
padding: 1em;
max-height: 80%;
overflow:auto;
}
Please try and let me know
EDIT:
three things have been done .
added overflow visible for content div. added overflow-auto for overlay-content
and set the height and width of overlay-inner, overlay-content in percentages
This is my code:
.divUserRepCont
{
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
}
.divUserContCon
{
width: auto;
height: 100%;
background-color: red;
}
.divUserCon
{
width: 50px;
height: 20px;
}
HTML:
<div class="divUserRepCont">
<div class="divUserContCon">
<div class="divUserCon">
</div>
</div>
</div>
I am expecting a red bar of width 50px, but instead the auto width "divUserContCon" is filling up the entire 195px of it's parent div. Why is this?
EDIT:
The purpose of divUserContCon having an auto width is because of this:
divUserCon's size will be changing dynamically, and it will have a background colour itself.
divUserContCon, will be the container for divUserCon, which itself will have a background colour AND padding.
So if divUserCon is 50px wide, with a green background, divUserContCon will be 50px wide (auto) + some padding and it's background colour.
width:50px;
Needs to be put in divUserContCon. You can't rely on auto to only take up the width of any child divs.
Try this
<style type="text/css">
.divUserRepCont {
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
}
.divUserContCon {
width: auto;
height: 25px;
}
.divUserCon {
width: 50px;
height: 25px;
background-color: red;
}
</style>
If you want your .divUserCon in the center then just add margin: 0 auto; in the css.
This is how I solved it:
.divUserRepCont
{
position: absolute;
top: 0;
left: 105px;
width: 195px;
height: 25px;
background-color: orange;
}
.divUserContCon
{
display: inline-block;
height: 100%;
padding-right: 20px;
background-color: yellow;
}
.divUserCon
{
display: inline-block;
height: 20px;
border-top: 5px solid rgb(62, 62, 62);
background-color: red;
}
I replaced the width: auto with display: inline-block;