Issue
so my issue is for some strange reason I'm having difficulty setting an overflow in the content area. I've tried using max-height and overflow-y: auto in the .window1.content selector but that shrinks the size of the image which I don't want. I just want a vertical scroll wheel to appear without messing up what I've already defined.
.window {
position: absolute;
z-index: 9;
background-color: rgba(20, 19, 43, 1);
text-align: center;
width: 500px;
height: 400px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.close-button {
background: rgba(0, 0, 0, 0.0);
border: 0px;
float: right;
margin-right: -4px;
margin-top: -1px;
}
.windowheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: rgba(37, 35, 58, 1);
color: #fff;
height: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.window1 img {
margin-top: 10px;
margin-bottom: 0;
width: 70%;
align-self: center;
}
.window1.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
overflow-y: auto;
}
.content h1,
p {
font-family: 'SF Pro Display';
margin-left: 72px;
margin-top: 2px;
text-align: left;
color: rgb(171, 168, 168);
}
.content h1 {
font-size: 26px;
font-weight: 600;
}
<div id="window1" class="window desktop hidden">
<div class="windowheader">
<div id="window1-title">LLLJJJIII</div>
<button class="close-button" onclick="closeTab(2)"> <div id="circle"></div> </button>
</div>
<div class="window1 content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Glazed-Donut.jpg/1200px-Glazed-Donut.jpg">
<h1>Username</h1>
<p>yes hello congrats you have made it to my website</p>
<p>this is currently a wip but for the time being will host all of my stuff and will just be a place where I put anything, software projects, 3d projects - anything I find cool.</p>
<p>since i'm still learning frontend development this website is going to have a lot of changes</p>
<p>this is supposed to mimic my desktop (even though mine doesn't look like this so get comfortable and enjoy being in my world)</p>
</div>
</div>
Solution
The below snippet should be what you're after. I've added the following CSS to the .window1.content
selector:
width: 500px;
height: 370px;
overflow-y: scroll;
The CSS above defines the space the window should be and turns on the vertical scrolling of the div.
I've also added some margin-top
to the image to ensure you can still see the image in the current layout.
.window {
position: absolute;
z-index: 9;
background-color: rgba(20, 19, 43, 1);
text-align: center;
width: 500px;
height: 400px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.close-button {
background: rgba(0, 0, 0, 0.0);
border: 0px;
float: right;
margin-right: -4px;
margin-top: -1px;
}
.windowheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: rgba(37, 35, 58, 1);
color: #fff;
height: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.window1 img {
margin-top: 10px;
margin-bottom: 0;
width: 70%;
align-self: center;
padding-top: 150px;
}
.window1.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
width: 500px;
height: 370px;
overflow-y: scroll;
}
.content h1,
p {
font-family: 'SF Pro Display';
margin-left: 72px;
margin-top: 2px;
text-align: left;
color: rgb(171, 168, 168);
}
.content h1 {
font-size: 26px;
font-weight: 600;
}
<div id="window1" class="window desktop hidden">
<div class="windowheader">
<div id="window1-title">LLLJJJIII</div>
<button class="close-button" onclick="closeTab(2)"> <div id="circle"></div> </button>
</div>
<div class="window1 content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Glazed-Donut.jpg/1200px-Glazed-Donut.jpg">
<h1>Username</h1>
<p>yes hello congrats you have made it to my website</p>
<p>this is currently a wip but for the time being will host all of my stuff and will just be a place where I put anything, software projects, 3d projects - anything I find cool.</p>
<p>since i'm still learning frontend development this website is going to have a lot of changes</p>
<p>this is supposed to mimic my desktop (even though mine doesn't look like this so get comfortable and enjoy being in my world)</p>
</div>
</div>
Answered By - Nick Friesen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.