Here is my contenteditable element:
#editor {
width: 200px;
height: 30px;
border: 1px solid red;
overflow: hidden;
}
<div id="editor" contenteditable="true"></div>
I want it can autosize according to the user's content. I try to listen to keyup event:
editor.addEventListener("keyup", function (){
newheight = editor.scrollHeight;
editor.style.height = newheight + "px";
})
this could work when the div grow higher, but when user delete all content, the div can't be shorter.
How can I let it be autosize?
DEMO here
Add "display: inline-block;" to your CSS and and "min-" to width and height.
Your DIV will automatically grow the innerHTML content.
<html>
<style type="text/css">
#Test
{
display: inline-block;
min-width: 30px;
min-height: 30px;
border: 1px solid red;
overflow: hidden;
}
</style>
<div id="Test" >
Nothing But Bigger
And <br />
Taller
</div>
</html>
Look at this fiddle:DEMO
This is working fine...
you just use the following HTML tag in your code
<div contenteditable="true" style= "border: 1px solid red; min-height:30px;width:200px"></div>
Related
This is a super weird problem. Probably caused by something stupid in my HTML or CSS. I'm learning javascript currently, and I'm making a super simple webpage that demonstrates the dragging ability of javascript. I have two divs, one that floats left and one right, and a p element that should be below the divs. The problem is, I can't separate them. The border of the p element extends into the divs for some reason. I've tried messing with the height of the p element, but then the border isn't even around the text—it's in the divs. I've also tried separating them with margin-top on the p element and that brings the divs down with it. So the elements seem stuck together and I truly don't know why. Here is my code:
var dropzone = document.getElementById("dropzone");
var dropzone2 = document.getElementById("dropzone2");
var text = document.getElementById("text");
var dragging = null;
var wheredrop = null;
function dragover(e){
wheredrop = e.target;
}
function dragend(e){
wheredrop.appendChild(dragging);
wheredrop = null;
dragging = null;
}
function drag(e){
dragging = e.target;
}
text.ondragstart = drag;
text.ondragend = dragend;
dropzone.ondragenter = dragover;
dropzone2.ondragenter = dragover;
document.body.ondragenter = dragover;
<!DOCTYPE html>
<html>
<head>
<title>Test Drag</title>
</head>
<body>
<div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
<div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
<p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>
</body>
</html>
You can add a property into your styles display:inline-block .I think it will solve both your issue it will be below div and the border of p would only take the size of the text
You can solve this by clearing the float. Add this <div style="clear: both;"></div> between second/last div and p element. This will clear the effect of float after the divs.
<div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
<div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
<div style="clear: both;"></div>
<p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>
I've tried to show the element div then get the offset and hide it again, also tried to left -9999 in style but neither is working.
var spaceBelow = $(this)[0].getBoundingClientRect().bottom;
console.log("Before: " spaceBelow);
$(this).show();
var spaceBelow = $(this)[0].getBoundingClientRect().bottom;
$(this).hide();
console.log("After: " spaceBelow);
Your proposed solution works fine for me in Vanilla JS.
Code:
function run(){
var test = document.getElementById("test");
test.style.display = "block";
alert(test.getBoundingClientRect().bottom);
test.style.display = "none";
}
<div style="display:none;" id="test"></div>
<button onclick="run();">Run</button>
You can not retrieve the position of a hidden element with "display: none" but you can use the property "visibility: hidden".
Here is the demo of the issue :
console.log($('div > div:eq(0)')[0].getBoundingClientRect().bottom);
console.log($('div > div:eq(1)')[0].getBoundingClientRect().bottom);
console.log($('div > div:eq(2)')[0].getBoundingClientRect().bottom);
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%;"></div>
</div>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%; display: none"></div>
</div>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%; visibility: hidden"></div>
</div>
</html>
You should also use the methods provided by jQuery.
Finding the position of bottom of a div with jquery
I try following codes. but this is not working. Hope you help me.
And div tag want to automatically increase height based on text size. If any one know the answer how to add the text into div tag? Here used jQuery inside the script tag.
$(function() {
$('#new').on('click', function() {
$('<p>Text</p>').appendTo('#Content');
});
});
#Content {
height: 770px;
width: 70%;
background-color: white;
border: 7px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="new" value="Add Text">Addvalues</button>
<div id="Content"></div>
This is because you set a fixed height to the #Content element. Remove the height or use min-height instead.
And this maybe because of the demo, but in your first example you missed to insert the jQuery script file to your document. You need to insert the js file into your head element before.
$(function() {
$('#new').on('click', function() {
$('<p>Text</p>').appendTo('#Content');
});
});
#Content {
width: 70%;
min-height: 100px;
background-color: white;
border: 7px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="new" value="Add Text">Addvalues</button>
<div id="Content"></div>
Set height of the div to 'auto' and also set a 'min-height' to the div.
#Content {
height: auto;
min-height: 200px;
width: 70%;
background-color: white;
border: 7px solid gray;
}
<script type="text/javascript">
$(function() {
$('#new').on('click', function() {
$('<p>Text</p>').appendTo('#Content');
});
});
</script>
<style type="text/css">
#Content {
width: 70%;
min-height: 70px;
background-color: white;
border: 7px solid gray;
}
</style>
<input type="button" id="new" value="Add Text">Addvalues</button>
<div id="Content"></div>
<button id="getData">Edit</button><br><br>
<textarea id="edit"></textarea><button id="done">Save</button>
<script type="text/javascript">
$("#getData").click(function(){
var data = $('#Content').text();
$("#edit").val(data);
});
$("#done").click(function(){
$("#Content").empty();
var EditData = $('#edit').val();
$("#Content").append('<p>'+EditData+'</p>');
});
</script>
I would like to type text in a contenteditable div that is placed right to an image.
HTML
<div class="container">
<div class="image">
<img src="/path/*.jpg" alt="" />
</div>
<div class="text" contenteditable>
<p></p>
</div>
<div class="clear"></div>
CSS
.container {
width: 1000px;
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
border: 1px solid #000;
}
.clear{
clear: both;
}
My goal is to have the caret positioned to the right of the image when I focus into the contenteditable and not to the beginning of the p tag as you can see in this Fiddle.
One solution was to insert a in the <p>, as showed in this other Fiddle, but this is not a very clean solution: it pollutes the text that is written inside.
I can take advantage of JavaScript and jQuery, but a pure HTML and CSS solution is preferred
Any thought?
UPDATE
I forgot to say that the text should go also under the image so it cannot be floated or hidden
Simply try margin-left:500px;
.text {
min-height: 30px;
border: 1px solid #000;
margin-left:500px;
}
You have to remove div's and apply to image these css-styles:
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
*zoom: 1;
*display: inline;
with
vertical-align: bottom;
Add overflow:hidden into an element that should not overlay a floating element:
http://jsfiddle.net/nothrem/0mdcLzqs/3/
<div class="container">
<div class="image">
<img src="https://ununsplash.imgix.net/photo-1417021423914-070979c8eb34?fit=crop&fm=jpg&q=75&w=1050" alt="" />
</div>
<div class="text" contenteditable style="overflow:hidden">
<p></p>
</div>
<div class="clear"></div>
</div>
UPDATE: you can use Javascript to change the overflow based on element's content
document.getElementsByClassName('text')[0].onblur = function() {
if (this.innerHTML.replace(/<[^>]+>/, '')) { //remove HTML tags
this.style.overflow = 'visible';
} else {
this.style.overflow = 'hidden';
}
}
Blur fires after you finish editing, you may want to add another events, e.g. onkeyup, onmouseclick, etc.
I am not a big fan of floats unless necessary, I'd remove the float: left from the image CSS and add to the .image, .text one these two lines:
display: inline-block;
vertical-align: top;
To get text under your image
Set the container width to the width of your image, and set the position of your text with float left or right like this:
.container {
width: 500px; // width of image
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
width:100%;
border-top: 1px solid #000;
float:left;
text-align:center;
}
.clear{
clear: both;
}
Here is a demo
I'm using AngularJS to add divs to a section, and I want the div to have a static start width and to grow dynamically when I add more divs, How can I do this?
This code doesn't work:
<body ng-app="plunker" ng-controller="MainCtrl">
<section>
<div ng-repeat="div in divs track by $index">
<div class="square"></div>
</div>
</section>
<button ng-click="add()">add</button>
</body>
section {
border: 1px solid red;
overflow: hidden;
padding: 10px 0;
width: 400px;
}
.square {
width: 100px;
height: 100px;
background: #000;
margin-right: 10px;
float: left;
margin-top: 1em;
}
Link for Plunker:
http://plnkr.co/edit/SqGXBh9zXK2P3LCIVOPG?p=preview
All you need to do is:
for section:
min-width: 450px; //min width of all blocks that inside your section
display: inline-block; //to make width "grow" with content
and for square:
display: inline-block; //instead of float, because float makes height to 0
http://plnkr.co/edit/azOKubY7b371u2Pt7JbD?p=preview
//note: I moved square class to parent node of ng-repeat, but it's not necessary, you just need to add display: inline-block; if you want to have previous structure.
You can accomplish this by also using float:left on the section:
section {
border: 1px solid red;
padding: 10px 0;
float:left;
}
And making the squares direct descendants, which will actually fill up the section:
<section>
<div class="square"ng-repeat="div in divs track by $index"></div>
</section>
Plnkr