Felix Felix - 1 month ago 15
CSS Question

set size content editable div based on the text inside this

I need to set the size of content editable div same as the text inside it

.Please see this js fiddle https://jsfiddle.net/felixtm/jaboLc3u/7/

$(".new-div").css("width",'auto');
} ,
stop: function() {
$(".new-div").css("width",'auto');
}
});
$(document).on("click",".closeButton",function(){

$(this).closest('div').remove();
});

$(".new-div").on("click", function(){

var uscontent= $(".new-div").text();

if(uscontent.trim()==="message"){
$(".new-div").text('');

} });

$("#font-size").on("change",function(){
var v=$(this).val();
$('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);

$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});


}
})

.new-div {
z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 0px; right: 0px; top: 15px; border:2px solid black;}
.parent-div {
max-width: 236px; width: 236px; position: relative; overflow: hidden; }

.closeButton
{
display:block;
position:absolute;
top:-10px;
left:-10px;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
display:block;
position:absolute;
bottom:-10px;
right:-10px;
width:27px;
height:27px;
background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
Font-size:<input type="range" min="12" max="120" id="font-size" />
</div>
<br>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true">
message
<a class="closeButton"><label hidden>.</label></a>
<a class="resizeButton"><label hidden>x</label></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">

</div>

</div>
</div>


Here first loading the size of content editable div and text inside is correct . But when i try to resize the div then there is a gap coming between the text and border of the div .

http://www.awesomescreenshot.com/image/1753533/329cefb018f213ecd9243f4cab9ab68a

Some time this problem is also coming http://www.awesomescreenshot.com/image/1753603/d27436262d454bee88bf53ebfab2049a

I tried
display:inline-block;
but it is not working .

How to solve this ?

Answer

This will solve your font-size problem, this is trickier than it seems.

kudos for this library : http://thdoan.github.io/scalem/

  

$( '.new-div').draggable({
                                    containment: "#bord",
                                     create: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                    drag: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                    start: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                     stop: function() { 
                                    $(".new-div").css("width",'auto');
                                     }
                                  });
         $(document).on("click",".closeButton",function(){

                                    $(this).closest('div').remove();
                                 });
                                 
        
                      
       $("#font-size").on("change",function(){
                     var v=$(this).val();
                               $('.new-div span').css('font-size', v + 'px');
                     });
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
	$('.new-div').height($('.resizeButton').position().top + 17);
	$('.new-div').width($('.resizeButton').position().left + 17);
  $('.new-div').width($('.resizeButton').position().left + 17);
   $('.new-div span').scalem();
	//$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});

  
}
});                     
.new-div { 
    z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 30%;top: 15px; border:2px solid black;}
.parent-div {  
    max-width: 236px; width: 236px; position: relative; overflow: hidden; }

.closeButton
{
    display:block;
    position:absolute;
    top:-10px;
    left:-10px;
    width:27px;
    height:27px;
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
    display:block;
    position:absolute;
    bottom:-10px;
    right:-10px;
    width:27px;
    height:27px;
    background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
    background-size: contain;
    cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://thdoan.github.io/scalem/javascripts/jquery.scalem.js"></script>


<div class="col-sm-12">
     <div class="parent-div">
     <div class="new-div" contenteditable="true" >
       <span data-scale-ratio="1" data-scale-reference=".new-div">
     message
         </span>
     <a class="closeButton"></a>
     <a class="resizeButton"></a>
     </div>
        <div class="bord" style="z-index: -1;">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
            
        </div>
        
     </div>
 </div>