The word-wrap malfunction is causing problems, leading to text overflow in a draggable element

Looking for help with a problem I'm facing. I have a draggable div with editable text inside, where users can adjust the text size using an input slider.

Is there a way to hide text that extends beyond the border of the image canvas div and reaches the col-sm-8?

If a user types a word without spaces, it may extend beyond the col-sm-8. How can this be prevented? I've tried using overflow:hidden and word-wrap:breakdown, but it hasn't solved the issue. https://i.sstatic.net/cSFc1.png

function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="img.png">
      </div>

    </div>
  </div>
</div>

I then tried using 

.text-canvas{ word-break: break-all; }
. This prevents the text from extending outside of the col-sm-8, but it still goes beyond the image div.

https://i.sstatic.net/LraTt.png

UPDATE: I managed to resolve the issue by adding padding-right:10%. However, I believe this is not the ideal solution. Any better suggestions?

javascriptjqueryhtmlcssdraggable

Answer №1

The Solution:

To achieve the desired layout, make sure to apply the following properties within your .parent-canvas class:

.parent-canvas {
  display: inline-block; /* Set to inline but retain block-level characteristics */
  overflow: hidden; /* Conceal text overflow within the container */
  position: relative; /* Use absolute positioning to remove text from normal flow and contain it */
}

You have two options after this step - you can either utilize word-break, or max-width in your .text-canvas class:

.text-canvas {
  word-break: break-all;
}

A Code Snippet Example:

function submit_button() {
  // Image upload function
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  word-break: break-all;
}
.image-canvas img {
  vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      Sample Text Here
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/100x100">
      </div>

    </div>
  </div>
</div>

Alternatively, you may combine both approaches without any conflicts:

.text-canvas {
  word-break: break-all;
  max-width: 100%;
}

Code Snippet Display:

You also have the option to use both methods together, as they complement each other well:

.text-canvas {
  word-break: break-all;
  max-width: 100%;
}

Additional Test Details:

System Tests Performed on:

  • Chrome Version 54.0.2840.71 (64-bit)
  • FireFox Version 49.0.2
  • Microsoft Edge Version 25.10586.0.0

iOS Device Testing Conducted On:

  • Iphone 6 Safari Mobile Browser

Potential User Experience Enhancement:

In terms of user experience improvement, consider adding the cursor: grab; and cursor: grabbing; properties to indicate draggable elements for Chrome and Firefox users. This small addition can enhance interaction with the interface.

Suggested CSS Properties for jQuery Draggable Classes:

.ui-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.ui-draggable-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

Final Code Snippet Including UX Adjustment:

function submit_button() {
  // Image upload function
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  word-break: break-all;
  max-width: 100%;
}
.image-canvas img {
  vertical-align: middle;
}
.ui-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.ui-draggable-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/100x100">
      </div>

    </div>
  </div>
</div>

Answer №2

To make the dimensions of .parent-canvas match the image, adjust the width and height accordingly, then apply overflow: hidden and position-relative to confine the absolutely positioned text.

.parent-canvas {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}


function set_submit_button() {
  /* ....Function for handling image uploads.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var newSize = $(this).val();
  $('.text-canvas').css('font-size', newSize + 'px');
});
.parent-canvas {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="set_submit_button()">
        <img src="http://placehold.it/300x200">
      </div>

    </div>
  </div>
</div>

Answer №3

For information on word breaking in CSS, visit https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

word-break: break-all; 


function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
  z-index: 1;
  position: absolute;
  word-break: break-all;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  position: relative;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="img.png">
      </div>

    </div>
  </div>
</div>

Answer №4

To hide the overflow text, you can use either text-overflow: ellipsis; or text-overflow: clip;.

function submit_form() {
  /* ....Image upload function.. */
}
$(".text-container").draggable({
  containment: ".image-form",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#font-size").on("change", function() {
  var value = $(this).val();
  $('.text-container').css('font-size', value + 'px');
});
.text-container {
  z-index: 1;
  position: absolute;
   text-overflow: clip;/*ellipsis,initial*/
  white-space: nowrap;
  overflow: hidden;
   width:3em;/*image container width*/
}
.image-form {
  z-index: -1;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="another-container">
    <input type="range" min="12" max="54" id="font-size">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-container">
    <div class="text-container" id="text-container" contenteditable="true">
      my text
    </div>
    <div class="image-container">
      <div class="image-form" onclick="submit_form()">
        <img src="img.png">
      </div>

    </div>
  </div>
</div>

Answer №5

Guidelines for Parent Elements:

.parent-canvas{
  display: inline-block;  
  overflow: hidden;
  position: relative;
}

Instructions for Child Elements (text-canvas):

.text-canvas {
  word-break: break-all;
}

Demonstration:

-Enhanced with a background color for better understanding

-Immediate change in font size

function submit_button() {
  /* ....Functionality for uploading images.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("input change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
  z-index: 1;
  position: absolute;
  word-break: break-all;
}
.imageupload {
  z-index: -1;
}
.col-sm-6 {
  background: red;  
}
.c {padding: 5px;}
.parent-canvas{
  background: orange;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  background: yellow;
  min-width: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="c col-sm-2">
  <div name="anotherdiv" style="display:flex">
    <div>8px</div>
    <input type="range" min="8" max="30" id="fontsize">
    <div>30px</div>
  </div>
</div>
<div class="c col-sm-12"></div>
<div class="c col-sm-6">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">      
      <div class="imageupload" onclick="submit_button()">
        <img src="http://lorempixel.com/150/150/">
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process of molding items?

Here is an object that I have: { "id": "Test", "firstname": "Test", "lastname": "Test", "age": 83 } However, I only want to return the object with this value: { "id&quo ...

javascriptnode.jstypescript

Having trouble retrieving nested object properties within a single object when making a JSON call in React?

When making a Rails API call, I receive a single JSON object with a nested User Object and a tag list array. However, I am unable to access the nested Object. The error message "Cannot read property 'name' of undefined" appears when trying to ac ...

javascriptjsonreactjs

I made some adjustments to the program, but I'm having trouble identifying the issue

Here's a simple form I'm using to input and send the category name: <form action="insertexp.php" method="post"> Category Name: <input type="text" name="name"><br> <input type="submit"> </form> This is my PHP script ...

phphtmlmysqlsql

JavaScript controller with numerous dependencies in AngularJS

I have created a new controller: .controller('myCtrl', function($scope, $route, $routeParams, $location) Now I am trying to inject something called SharedState. I attempted: .controller('chatCtrl' ['SharedState', function($ ...

javascriptangularjs

Is there a way to specify both a fixed width and a custom resizable length for a Spring <form:textarea /> element?

Despite extensive research, I have yet to find an answer to my specific problem. Within a model window, I have a textarea element: <div class="form-group"> <label for="groupDescription" class="col-sm-2 control-label"> Descripti ...

javascripthtmlcssjspbootstrap-modal

Obtain the dimensions of the outermost layer in a JSON file

Could you please help me extract the dimensions (600*600) of the outermost layer from the JSON below dynamically? { "path" : "shape\/", "info" : { "author" : "" }, "name" : "shape", "layers" : [ { ...

javascriptjson

jQuery is an excellent tool for implementing drag and drop folder upload functionality, all without

I am creating a drag and drop file uploader with basic functionality. Here is the code: HTML: <div class="drop-box drop-area"> <form enctype="multipart/form-data" id="yourregularuploadformId"> <input type="file" name="files[]" ...

javascriptjqueryajaxhtmljquery-file-upload

Sending Values to a Function via Datatables Button

Is there a way to pass the value of a button in a datatables to a function? Currently, I am only able to get the value of the first row. Any assistance would be greatly appreciated. All I need is to alert the parameter and I will handle the rest. Here is ...

javascriptphpajaxdatatablesbootstrap-modal

Navigating through row items horizontally can be achieved by scrolling them to

For a project, I am attempting to recreate the layout of a website similar to Netflix. In Netflix, each category displays videos in a horizontal row, with most of the videos located off-screen and requiring users to click an arrow button to scroll through ...

htmlcssbootstrap-4horizontal-scrolling

Executing a jQuery AJAX request to a Slim Framework PHP function with a null parameter

While working with the slim framework, I encountered an issue where a POST request to insert a record was not functioning at all. I suspect that I might be passing a parameter identified as null, which could potentially result in inserting a null record in ...

phpjqueryajaxframeworksslim

JavaScript tri-state toggling

After devising 2 buttons, each intended to toggle a heading or paragraph, I encountered a slight issue. When using the 'Toggle Para' button, the switch occurs between 2 paragraphs upon 2 clicks. However, on the third click, I desire for both para ...

javascriptjqueryhtmlcss

Distinguishing each unique JavaScript property within an array of objects

I've been struggling with this problem for quite some time. I have an array of objects, focusing on the "00" object at the moment, and I am trying to group together the bestScore properties in a specific way: .. User Group apple .. User Group ba ...

javascriptjqueryhtml

Vue paired with Rainyday.js

I attempted to incorporate Vue with rainyday.js by following different resources, but unfortunately could not find any relevant information. Can anyone provide guidance on how to successfully implement rainyday.js with Vue? <body onload="run();"> ...

javascriptvue.jsvuejs2vue-component

arranged horizontally in a row html bootstrap

How can I place 2 horizontal cards next to each other? My current code overlaps the cards and creates a messy layout. I want the cards to be side by side like this: https://i.sstatic.net/s6225.png <div class="card-body p-0 d-flex justify-content-arou ...

htmlcssbootstrap-4

Form Input: Retrieve Exclusive Value Using Identical Name and ID

I have successfully executed a query and displayed the results on my address page using PHP and AJAX. <div id="address-wrap"> <div id="report-address">3719 COCOPLUM CIR <br> Unit: 3548<br> COCONUT CREEK, FL 33063</div> <di ...

javascriptajaxformsmobile

How can a "Loading" message be displayed while external JavaScript is loading?

I have mastered the art of using JS or jQuery to showcase a "Loading" message during the loading process. Currently, I am working on a sizeable web application that relies on various JS dependencies, and I am seeking a way to exhibit a "loading" message wh ...

javascript

I am able to input data into other fields in mongoDB, however, I am unable to input the

I am facing an issue with the password while everything else seems to be working fine. I am using a schema and getting an error, but it could be a problem in my functions because I hashed the password. I am unable to identify what's causing the issue. ...

javascriptexpressmongoose

Search box enlargement obstructing navigation bar links

I've been experimenting with a Javascript feature that starts with a search monocle icon. When clicked, the search box expands over the navigation bar. However, I'm running into an issue where even when the search box is not covering the navbar, ...

javascriptcsssearchz-index

Executing empty arguments with `execute_script` in Selenium with Firefox

I need help setting the value of a textarea using JavaScript instead of the send_keys() method. According to the documentation, I should be able to pass a webelement to execute_script as a parameter and refer to this parameter using the arguments array. H ...

javascriptpythonfirefoxseleniumselenium-webdriver

Ways to generate a unique random number from an Array without repetition using Javascript

Looking to retrieve a random number from an array of numbers known as cardNumbertemp. function shuffleCard(){ randomized = Math.floor(Math.random()*cardNumbertemp.length); for (var i = 0; i < cardNumbertemp.length; i++){ ...

javascriptarrays