Overflow-y scroll causes content to cut off
1
I currently have a container that has a max-height of 800px. It also has overflow-y: scroll. What I am trying to accomplish is simple (Probably not so simple, hence why I am asking you guys!).
I want to continue to have this overflow-y scroll. However, I have content which gets cut off. I have a div with class future-dropdown which I want content inside to purposely overlay this container. If you take a look at the code snippet, my content inside the div gets cut off as it should because of the overflow-y scroll.
How can I get around this and still have this? I still need this scrollable container but I also need a way to still have my content show in that position.
Suggestions please!
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown {
position: relative;
left: 200px;
} <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>css css3 scroll overflow
edited Nov 13 '18 at 5:19
Nik
1189
asked Nov 13 '18 at 4:57
Peter Tran
112118
add a comment |
1
I currently have a container that has a max-height of 800px. It also has overflow-y: scroll. What I am trying to accomplish is simple (Probably not so simple, hence why I am asking you guys!).
I want to continue to have this overflow-y scroll. However, I have content which gets cut off. I have a div with class future-dropdown which I want content inside to purposely overlay this container. If you take a look at the code snippet, my content inside the div gets cut off as it should because of the overflow-y scroll.
How can I get around this and still have this? I still need this scrollable container but I also need a way to still have my content show in that position.
Suggestions please!
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown {
position: relative;
left: 200px;
} <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>css css3 scroll overflow
edited Nov 13 '18 at 5:19
Nik
1189
asked Nov 13 '18 at 4:57
Peter Tran
112118
And if you change the width of .scroll-list?
– MartinBA
Nov 13 '18 at 5:09
I need the width to stay the same.
– Peter Tran
Nov 13 '18 at 5:10
add a comment |
1
1
1
I currently have a container that has a max-height of 800px. It also has overflow-y: scroll. What I am trying to accomplish is simple (Probably not so simple, hence why I am asking you guys!).
I want to continue to have this overflow-y scroll. However, I have content which gets cut off. I have a div with class future-dropdown which I want content inside to purposely overlay this container. If you take a look at the code snippet, my content inside the div gets cut off as it should because of the overflow-y scroll.
How can I get around this and still have this? I still need this scrollable container but I also need a way to still have my content show in that position.
Suggestions please!
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown {
position: relative;
left: 200px;
} <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>css css3 scroll overflow
edited Nov 13 '18 at 5:19
Nik
1189
asked Nov 13 '18 at 4:57
Peter Tran
112118
I currently have a container that has a max-height of 800px. It also has overflow-y: scroll. What I am trying to accomplish is simple (Probably not so simple, hence why I am asking you guys!).
I want to continue to have this overflow-y scroll. However, I have content which gets cut off. I have a div with class future-dropdown which I want content inside to purposely overlay this container. If you take a look at the code snippet, my content inside the div gets cut off as it should because of the overflow-y scroll.
How can I get around this and still have this? I still need this scrollable container but I also need a way to still have my content show in that position.
Suggestions please!
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown {
position: relative;
left: 200px;
} <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html> * {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown {
position: relative;
left: 200px;
} <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html> * {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown {
position: relative;
left: 200px;
} <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>css css3 scroll overflow
css css3 scroll overflow
edited Nov 13 '18 at 5:19
Nik
1189
asked Nov 13 '18 at 4:57
Peter Tran
112118
edited Nov 13 '18 at 5:19
Nik
1189
asked Nov 13 '18 at 4:57
Peter Tran
112118
edited Nov 13 '18 at 5:19
Nik
1189
edited Nov 13 '18 at 5:19
Nik
1189
edited Nov 13 '18 at 5:19
Nik
1189
1189
asked Nov 13 '18 at 4:57
Peter Tran
112118
asked Nov 13 '18 at 4:57
Peter Tran
112118
asked Nov 13 '18 at 4:57
Peter Tran
112118
112118
And if you change the width of .scroll-list?
– MartinBA
Nov 13 '18 at 5:09
I need the width to stay the same.
– Peter Tran
Nov 13 '18 at 5:10
add a comment |
And if you change the width of .scroll-list?
– MartinBA
Nov 13 '18 at 5:09
I need the width to stay the same.
– Peter Tran
Nov 13 '18 at 5:10
And if you change the width of .scroll-list?
– MartinBA
Nov 13 '18 at 5:09
And if you change the width of .scroll-list?
– MartinBA
Nov 13 '18 at 5:09
I need the width to stay the same.
– Peter Tran
Nov 13 '18 at 5:10
I need the width to stay the same.
– Peter Tran
Nov 13 '18 at 5:10
add a comment |
2 Answers
2
active
oldest
votes
0
Maybe you can do something like this
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: left; /*Change from center to left*/
list-style-type: none;
background: lightgray;
padding: 20px; /*Add some padding*/
/* margin: 0 auto; */
}
Let me know if that help you!
answered Nov 13 '18 at 5:13
MartinBA
7161213
Hi. I have a weird case where I need the content to be visible in that position where it was placed. This has nothing to do with alignment. My goal is to have the the content show with having overflow-y still scrollable. Thank you though!
– Peter Tran
Nov 13 '18 at 5:20
add a comment |
0
Have a look at this code snippet.
I've added following css,
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}
Since positioning the div with left property would cause it to start from the defined pixel position, it was getting cropped.
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown1">Future dropdown</div></li>
<li>Content <div class="future-dropdown2">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>answered Nov 13 '18 at 5:25
Nik
1189
I want the content to be visible outside of its 400px container. Thanks for your suggestion.
– Peter Tran
Nov 13 '18 at 5:53
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274067%2foverflow-y-scroll-causes-content-to-cut-off%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Maybe you can do something like this
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: left; /*Change from center to left*/
list-style-type: none;
background: lightgray;
padding: 20px; /*Add some padding*/
/* margin: 0 auto; */
}
Let me know if that help you!
answered Nov 13 '18 at 5:13
MartinBA
7161213
Hi. I have a weird case where I need the content to be visible in that position where it was placed. This has nothing to do with alignment. My goal is to have the the content show with having overflow-y still scrollable. Thank you though!
– Peter Tran
Nov 13 '18 at 5:20
add a comment |
0
Maybe you can do something like this
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: left; /*Change from center to left*/
list-style-type: none;
background: lightgray;
padding: 20px; /*Add some padding*/
/* margin: 0 auto; */
}
Let me know if that help you!
answered Nov 13 '18 at 5:13
MartinBA
7161213
Hi. I have a weird case where I need the content to be visible in that position where it was placed. This has nothing to do with alignment. My goal is to have the the content show with having overflow-y still scrollable. Thank you though!
– Peter Tran
Nov 13 '18 at 5:20
add a comment |
0
0
0
Maybe you can do something like this
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: left; /*Change from center to left*/
list-style-type: none;
background: lightgray;
padding: 20px; /*Add some padding*/
/* margin: 0 auto; */
}
Let me know if that help you!
answered Nov 13 '18 at 5:13
MartinBA
7161213
Maybe you can do something like this
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: left; /*Change from center to left*/
list-style-type: none;
background: lightgray;
padding: 20px; /*Add some padding*/
/* margin: 0 auto; */
}
Let me know if that help you!
answered Nov 13 '18 at 5:13
MartinBA
7161213
answered Nov 13 '18 at 5:13
MartinBA
7161213
answered Nov 13 '18 at 5:13
MartinBA
7161213
answered Nov 13 '18 at 5:13
MartinBA
7161213
7161213
Hi. I have a weird case where I need the content to be visible in that position where it was placed. This has nothing to do with alignment. My goal is to have the the content show with having overflow-y still scrollable. Thank you though!
– Peter Tran
Nov 13 '18 at 5:20
add a comment |
Hi. I have a weird case where I need the content to be visible in that position where it was placed. This has nothing to do with alignment. My goal is to have the the content show with having overflow-y still scrollable. Thank you though!
– Peter Tran
Nov 13 '18 at 5:20
Hi. I have a weird case where I need the content to be visible in that position where it was placed. This has nothing to do with alignment. My goal is to have the the content show with having overflow-y still scrollable. Thank you though!
– Peter Tran
Nov 13 '18 at 5:20
Hi. I have a weird case where I need the content to be visible in that position where it was placed. This has nothing to do with alignment. My goal is to have the the content show with having overflow-y still scrollable. Thank you though!
– Peter Tran
Nov 13 '18 at 5:20
add a comment |
0
Have a look at this code snippet.
I've added following css,
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}
Since positioning the div with left property would cause it to start from the defined pixel position, it was getting cropped.
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown1">Future dropdown</div></li>
<li>Content <div class="future-dropdown2">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>answered Nov 13 '18 at 5:25
Nik
1189
I want the content to be visible outside of its 400px container. Thanks for your suggestion.
– Peter Tran
Nov 13 '18 at 5:53
add a comment |
0
Have a look at this code snippet.
I've added following css,
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}
Since positioning the div with left property would cause it to start from the defined pixel position, it was getting cropped.
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown1">Future dropdown</div></li>
<li>Content <div class="future-dropdown2">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>answered Nov 13 '18 at 5:25
Nik
1189
I want the content to be visible outside of its 400px container. Thanks for your suggestion.
– Peter Tran
Nov 13 '18 at 5:53
add a comment |
0
0
0
Have a look at this code snippet.
I've added following css,
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}
Since positioning the div with left property would cause it to start from the defined pixel position, it was getting cropped.
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown1">Future dropdown</div></li>
<li>Content <div class="future-dropdown2">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>answered Nov 13 '18 at 5:25
Nik
1189
Have a look at this code snippet.
I've added following css,
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}
Since positioning the div with left property would cause it to start from the defined pixel position, it was getting cropped.
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown1">Future dropdown</div></li>
<li>Content <div class="future-dropdown2">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown1">Future dropdown</div></li>
<li>Content <div class="future-dropdown2">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown1">Future dropdown</div></li>
<li>Content <div class="future-dropdown2">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>answered Nov 13 '18 at 5:25
Nik
1189
answered Nov 13 '18 at 5:25
Nik
1189
answered Nov 13 '18 at 5:25
Nik
1189
answered Nov 13 '18 at 5:25
Nik
1189
1189
I want the content to be visible outside of its 400px container. Thanks for your suggestion.
– Peter Tran
Nov 13 '18 at 5:53
add a comment |
I want the content to be visible outside of its 400px container. Thanks for your suggestion.
– Peter Tran
Nov 13 '18 at 5:53
I want the content to be visible outside of its 400px container. Thanks for your suggestion.
– Peter Tran
Nov 13 '18 at 5:53
I want the content to be visible outside of its 400px container. Thanks for your suggestion.
– Peter Tran
Nov 13 '18 at 5:53
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274067%2foverflow-y-scroll-causes-content-to-cut-off%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
And if you change the width of .scroll-list?
– MartinBA
Nov 13 '18 at 5:09
I need the width to stay the same.
– Peter Tran
Nov 13 '18 at 5:10