I want to add two Div in the page, one Div for the top part, which is ready-only, the other one Div for the lower part, which is editable. What I want to achieve is:
Make the lower Div editable and scrollable if content is too long.
While scrolling the lower Div, the top Div should stay at the same position
Here is the code I have:
<html>
<body>
<div>
<div>Top Part</div>
<div contenteditable="true">Click here to type</div>
</div>
</body>
</html>
In the code above, if I click on the lower Div, we can then type, then if we keep pressing Enter, it will show the vertical scroll bar, but if I scroll, the top Div will be scrolled up too, which I want to avoid.
So, how can I make the scroll bar only applied to the lower Div?
The scrollbar currently gets applied to the entire window, so all elements on the page scroll up and down together. One alternative is to make the editable area scrollable. Restrict the height of that area and set its overflow to "auto" or "scroll".
.edit {
max-height: 5em;
overflow-y: auto;
}
<div>
<div>Top Part</div>
<div contenteditable="true" class="edit">Click here to type</div>
</div>
You can avoid setting a specific height for the scrollable area by using the window height as the limiter. One method is to use flexbox so that the scrollable area fills the remaining window height. Here's an example. In your case, the <body> can be the "outer" flexbox container.
In the demonstration below, the <body> is split into two areas: the top area and a bottom "scrollable-container" area that fills the remaining window height. The bottom area limits the maximum height of the editable/scrollable area.
I also added a "placeholder" technique discussed here: Placeholder for contenteditable div.
html,
body {
margin: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background-color: #EEF;
}
.scroll-container {
flex: 1;
min-height: 1em;
}
.scrollable {
max-height: 100%;
overflow-y: auto;
}
.header,
.scrollable {
padding: 0.5em;
box-sizing: border-box;
}
[contenteditable=true]:empty:before {
content: attr(data-placeholder);
color: grey;
font-style: italic;
cursor: text;
}
<div class="header">Top Part</div>
<div class="scroll-container">
<div contenteditable="true" class="scrollable" data-placeholder="Click here to type"></div>
</div>
If you mean that you want the top part to always be viewable at the top, you can use position: sticky.
.sticky {
font-size: 2em;
position: sticky;
top: 0;
}
[contenteditable=true] {
border: 0.1em solid black;
}
<html>
<body>
<div>
<div class="sticky">Top Part</div>
<div contenteditable="true">Click here to type</div>
</div>
</body>
</html>
You could do somthing like this:
.scrollable{
overflow-y: scroll;
max-height: 150px;
}
<html>
<body>
<div>
<div>Top Part</div>
<div class="scrollable" contenteditable="true">Click here to type</div>
</div>
</body>
</html>
Related
I want to make my page scroll normally and stop and fix on a certain point, then scroll div, and after div is completely scrolled continue scrolling body as usual.
I've tried to disable scrolling of the page and work with the wheel event, adding margin top to my content, but it doesn't seem to be a good solution.
Example of what i want https://aimbulance.com/ilayaregeneration
Thanks!
Your example is not locking the scroll to the div, but masking the entire page and using position: sticky in order to achieve that.
SOLUTION
A possible solution is to make the div you want to be scrolled a container with position: relative that holds a masking element with position: absolute that covers the entire div and contains a mask that will be position: sticky with top: 0.
check out this example:
https://codesandbox.io/s/scrolled-div-jqw7z
Use overflow-y
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
display: flex;
justify-content: center;
/* this is the usage */
overflow-y: auto;
}
#inner {
/* this height is larger than the parent */
height: 1200px;
width: 33%;
background: radial-gradient(circle, black, white);
overflow-y: auto;
}
#section3 {
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main" id="section1">
</div>
<div class="main" id="section2">
<div id="inner"></div>
</div>
<div class="main" id="section3">
</div>
</body>
</html>
I'm trying to do an effect that hide a div behind other like this page: Canalla Agency. I use two divs and the last one with position fixed, and it's worked, but the div lost the height.
Sorry for my explanation but I'm not good in CSS positioning and Javascript. I hope you can help me and see you soon. Thanks.
Solution with three <div>'s:
The only tricky bit is the "viewer" div creates the scrolling space to see the background div.
No JS required!
Also remember to specify position when using z-index.
<html>
<style>
#cover, #viewer, #background {
box-sizing: border-box;
position: relative;
padding-top: 50vh;
text-align: center;
height: 100vh;
width: 100%;
}
#cover {
background-color: paleturquoise;
z-index: 1;
}
#viewer {
z-index: -1;
}
#background {
background-color: coral;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div id="cover">
<h1>This Scrolls Up</h1>
</div>
<div id="viewer"></div>
<div id="background">
<h1>This Stays Static</h1>
</div>
</body>
</html>
I have a single container div with two child div's. The container div is 100% width. The child div's are left floated. The left div's width is not set because it's contents must decide it's width. The right div's width must be 100% minus the width of the left div.
HTML:
<div class="container">
<div class="message-name"><p>User :</p></div>
<div class="message-msg"><p>Some message</p></div>
</div>
<div class="container">
<div class="message-name"><p>User : </p></div>
<div class="message-msg"><p>Some really long message that breaks to new line because it is too long to stay on this line. mmmm mmmmmmmmmmmmm mmmmmmmmmmmmm mmmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmmm mmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmm</p></div>
</div>
CSS:
*{margin:0;pading:0;}
.container{
width:100%;
min-height: 20px;
overflow: auto;
}
.message-name{
height: 20px;
text-align: left;
float: left;
border: 1px solid red;
}
.message-msg{
border: 1px solid red;
min-height: 20px;
float: left;
}
This is my attempt at using JQuery to dynamically set the width of the right div when it is added to the page dynamically:
$(document).ready( function(){
var nameWidth = $(".message-name").last().width();
alert(nameWidth);
$(".message-msg").last().css("width","100%").width($(".message-msg").last() - nameWidth);
});
But it doesn't change anything.
How can I get the width of the left div and then subtract that from the width of the right div to ensure the right div does not break to a new line?
Here is a JSFiddle of my attempt.
Use flexbox, it's support is wide enough for most reasonable purposes.
No scripting required, much more FLEXible!
* {
margin:0;
padding:0;
}
.container {
width:100%;
min-height: 20px;
overflow: auto;
display: flex;
flex-direction: row;
}
.message-name {
height: 20px;
text-align: left;
border: 1px solid red;
flex-shrink: 0;
}
.message-msg {
border: 1px solid red;
min-height: 20px;
flex-grow: 1;
flex-shrink: 1;
}
<div class="container">
<div class="message-name"><p>User :</p></div>
<div class="message-msg"><p>Some message</p></div>
</div>
<div class="container">
<div class="message-name"><p>User : </p></div>
<div class="message-msg"><p>Some really long message that breaks to new line because it is too long to stay on this line. mmmm mmmmmmmmmmmmm mmmmmmmmmmmmm mmmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmmm mmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmm</p></div>
</div>
Also on JSFiddle
A more efficient way to use flexbox is to just declare the .message-msg block to be flex: https://jsfiddle.net/84vocLbk/. It'll be situated horizontally next to the .message-name and stretch the available width.
CSS:
.message-msg {
border: 1px solid red;
min-height: 20px;
display: flex;
}
Please try this
$(".message-msg").last().width($(".message-msg").last().width() - nameWidth);
Border 2px for each div is present. If you want to place it to the left then try this
$(".message-msg").last().width($(".message-msg").last().width()-2 - nameWidth-2);
DEMO without removing border
DEMO after removing the border
Add this
$(".message-msg").last().css("width","100%").width($(".message-msg").last().width() - nameWidth);
In thaat line you're setting the width to 100% then changing that width to 100% minus the variable nameWidth You have to get width of last div to do calculations
You can achieve this with CSS.
fiddle: https://jsfiddle.net/zof15z6c/7/
This works by setting the overflow of the second div to hidden or auto. if your content is just a text I suggest setting it to hidden since the text would just wrap around.
Changes to the css
.message-msg{
border: 1px solid red;
min-height: 20px;
overflow:hidden;
}
Advantages:
Works on most browsers (tested in IE7)
The browser takes care of window resizes
Cleaner code
Disadvantages
Overflow should either be hidden or auto. This will not be an issue for you since you just have text.
There're 2 divs - top and bottom.
The bottom should serve as a 'buttons pane', so visible and 'pinned' to bottom border at all times. root div is a Kendo UI Window div (see jsbin fiddle)
The problem is that the scrollbar is not being shown ONLY for the top div, but for 'buttons pane' as well. In the given jsbin resize down the window vertically, so the scrollbar appears:
http://jsbin.com/UrasoKi/3/edit
<style scoped>
#top{
min-height: 500px;
width: 100%;
background-color: blue
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
</style>
<div id="w">
<div id="top">TOP PANE</div>
<div id="bottom">BOTTOM PANE</div>
</div>
I would like to achieve clear bottom div positioning with css. Scrollbar should appear for TOP panel ONLY.
Elements MUST BE positioned INSIDE <div id='w'/> in fiddle (because of telerik kendo window resize handles) AND BE RESIZABLE, so any extra volume would be given to the top pane. But extra divs could be added into it (into div id="w")
I've been trying to play around for hours, something is missing.
I would tweak as follows to provide the sort of functionality you want:
<body>
<style scoped>
#top{
height: 100%;
width: 100%;
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
#inner {
overflow-y:scroll;
height: 100%;
background-color: blue
}
</style>
<div id="w">
<div id="top"><div id="inner">TOP PANE</div></div> <div id="bottom">BOTTOM PANE</div>
</div>
<script>
$(document).ready(function() {
$('#w').kendoWindow({
width: '450px'
});
$('.k-window-content').css({'overflow':'hidden', scrollable: false })
});
</script>
</body>
The tweaks include fixing the size of the Kendo Window and adding an inner div with fixed height and overflow-y scrolling for the top panel.
I hope this helps...
The attribute min-height: 500px; is causing the window to show a scrollbar. You would want to put the two divs in another div with a fixed min-height and then give the two divs a fixed min-height
Edit:
Edited your fiddle, see if that is what you need.
http://jsbin.com/efOgoVE/10/edit
I have this html structure.
<div id="parent">
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
</div>
and a css for those elements.
#parent{
padding: 0px 8px;
overflow: auto;
max-width: 100%;
max-height: 100%;
}
.child{
width: 300px;
display: block;
}
.child:first-child{
float: left;
}
.child:last-child{
float: right;
}
.child:nth-child(2){
/* what is the style here to make it center? */
}
as you can see from above codes, the objective is to make those child elements align correctly in a neat and clean way so the first child element is floated left, the last child element is floated right and the second child element should be exactly on between those left and right child elements so what im trying to achieve is a three box that align on a equal patern inside a parent div. So far I tried margin: 0 auto; on the middle child element but unfortunately does not work so currently Im looking for a precise solution to achieve my desired output.
Just float it:
#parent{
padding: 0px 8px;
overflow: auto;
max-height: 100%;
float:left;
width:900px;
}
.child{
width: 300px;
display: block;
float:right;
}
here's a fiddle
Float your second div to the left and apply a margin left if needed. If you are trying to create a responsive template, simply use % instead of pixels. I hope that makes sense.
.child:first-child, .child:nth-child(2) {
float:left;
}
.child:nth-child(2) {
/* what is the style here to make it center? */
margin-left: what ever pixels or %;
}
.child:last-child {
float:right;
}
JSFIDDLE (Responsive):
http://jsfiddle.net/83Gg2/
You don't need to float the elements one to other, what you need, is to use display: inline-block property on them, is an hacky but an cleaner approach:
#parent{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.child{
width: 33%; // Since there are 3 childs.
display: inline-block;
}
The trick and hack here is that you need to comment the space between the child elements in your HTML code, since the property display:inline-block only align elements that have not space between them, so your html code should look like this:
<div id="parent">
<div class="child">
<h1>title</h1>
<p>content</p>
</div><!--
--><div class="child">
<h1>title</h1>
<p>content</p>
</div><!--
--><div class="child">
<h1>title</h1>
<p>content</p>
</div>
</div>
~
This is the link to the JsFiddle Check it out
~
~
Flexbox makes this trivial:
#parent {
display: flex;
}
.child {
flex: 1;
}
Add prefixes and older syntax as necessary, conforming to http://caniuse.com/#search=flexbox
I whipped up an example for you: http://codepen.io/anon/pen/tribL
Ok, since you tag jquery also, here is the JQ way.
If you dont want to set fix width to #parent and you want a fix width to .child, use this. Also works in cross browsers and old browsers.
DEMO http://jsfiddle.net/yeyene/VW9mw/
$(document).ready(function(){
moveCenter();
$(window).resize(function() {
moveCenter();
});
});
function moveCenter(){
var mar = ($('#parent').width()-$('.child').width()*3)/2;
$('.child').eq(1).css({
'margin-left': mar+'px',
'margin-right':mar+'px'
});
}