Is it possible to impose dimensions on a content-editable div?

Is there a way to make a content editable div act like a text box with a fixed horizontal width and unlimited vertical expansion? Take a look at this jsfiddle, and find the code below: http://jsfiddle.net/seoj7cgq/

<!--How do I force the text to stay in the div horizontally and scroll infinitely vertically?-->
<title>JS Bin</title>
<style>

  .element {
    max-height: 200px;
    width:300px;
    height:300px;
    max-width: 300px;
    background: #999;
    overflow: hidden;
}

</style>
</head>
<body>
  <div class="element" contenteditable=true>
    this is the text
  </div>
</body>
</html>

Answer №1

Implement the scrolling feature using CSS properties:

.box {
  max-height: 250px;
  width: 400px;
  height: 400px;
  max-width: 400px;
  background: #333;
  overflow-x: hidden;
  overflow-y: scroll;
}
<div class="box" contenteditable=true>Lorem ipsum dolor sit amet.</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

Tips for sending an array of input field values through an Ajax request

In my current web form, there is a dynamic option that adds rows with the same attributes. These rows need to be submitted through an Ajax call to my PHP for insertion into the database. Access: <tr> <td><input type"text" name="access[nam ...

Creating JSON data based on user provided input within a text area

I am currently developing an application that requires a json datafile to generate certain elements. I am looking to gather user input through this form: { "nodes": [ { "id": "n0", "label": "A node", "x": 0, "y": 0, "si ...

One way to enhance Razor helpers is by integrating parameters into them

Is there a way to create an HTML Helper similar to @Html.TextBoxFor(model => model.signature) that includes a data-id parameter in the generated input, like shown below? <input type="text" name="signature" data-id="No Signature" /> I understand ...

During the serialization process of a System.Reflection object, a circular reference was identified

One of my asp.net MVC 3 controller action methods looks like this: public JsonResult GetRecordingRates(int Id) { List<DefaultRateChart> defaultRateCharts = new List<DefaultRateChart>(); using (IDefaultRateChartManager defau ...

What is the method for loading a subcategory based on the category by invoking a jQuery function within the <td> element of a JavaScript function that adds rows dynamically?

Whenever I click the add row button, the category dropdown list successfully loads. However, when I select an option from this category list, the subcategory does not load any list. The Javascript function responsible for adding rows dynamically is as fol ...

Whiskey Angostura and Straight Row Set to 8, not 12

Recently, I incorporated Bourbon, Bitters, and Neat into my rails application. However, I am encountering an issue where the number of grid-columns is stuck at 8 instead of the desired 12. To address this problem, I have taken the following steps: Ensur ...

Looking for a dynamic solution to retrieve over 100 data products in Angular JS? Let's explore methods to efficiently call a large volume of

Just starting out with Angular JS and working on creating a searchable product list gallery using Angular JS. Currently, all my product data is in the same js file which I know isn't the best solution. I would like to make it dynamic by connecting to ...

ajax request sends data to php file, which then processes the data and sends it back using $_POST

Currently, I am in the process of developing a budget management application using a combination of HTML, Javascript, and PHP. The main objective is to allow users to input data into a database through a form interface. To achieve this functionality, I hav ...

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

I am in the process of customizing a Data Grid Toolbar component by making adjustments to the existing Grid Toolbar components sourced from Material-UI. For reference, you can view the official example of the Grid Toolbar components here. Upon clicking o ...

Why does my event dispatch only run once upon form submission in Svelte JS?

My code successfully fetches data and puts it in a card when new data is added to the input. However, the issue arises when more than one data entry is made - although the data gets added to the database, it does not reflect in the data list. Can anyone he ...

How to apply dynamic values for filtering in TypeScript?

My task is to filter out all Portfolio Lead who have English Competency set to No. var data = [{ "Employee Number": 138, "English Competency": "No", "Portfolio Lead": "x", "Maths Competency": "No" }, { "Employee Number": 1385, ...

Ways to invoke Java function using Javascript (Client-side)

I have a Java Swing application that handles the User Interface, but requires JavaScript files for hardware testing. The application calls a JavaScript engine to execute functions using the `InvokeFunction()` method. Currently, I am utilizing the LabJack ...

AJAX: Building a Robust Single Page Application with Enhanced Security

Currently, I am developing a web/mobile application using AJAX. This app consists of 4 pages: the login page and three protected pages that are only accessible to logged-in users. My plan is to implement the Single Page Application pattern, where all 4 pa ...

JQuery not refreshing data values

function addToRewardDatabase() { var rewardValue = "98"; $.post("db/mkreward.php", { proid: getURLParameter("id") }, function(data) { rewardValue = "99"; alert(rewardValue); }); alert(rewardValue); return ...

The situation arose where Next.js could not access the cookie due to

Hi there, I'm new to web development and recently encountered a challenge with my next.js app. I'm currently following Brad Traversy's course on udemy to learn basic CRUD functions. In this component, I am trying to fetch user data from my ...

Style applied directly to .col elements

I want to customize the styling of the .col elements on a single page without affecting other pages. I've tried adding the following code snippet to my CSS file: .col { border: 1px solid #7851A9; } However, this also styles the element ...

Detect if the content loaded in the web view is a PDF file and provide a downloadable option

I am using wkWebView to access research papers from IEEE, Science Direct, and other sources. When I click on a PDF in the research papers, it gets loaded into the webview. Is there a way to detect and enable a download icon in wkWebView? Attempted Solutio ...

Issue with Thickbox - showing up towards the end of the page

I'm encountering a strange issue with a PHP page in Wordpress. When I include an inline Thickbox on the page and try to open it, the Thickbox appears at the very bottom of the page, below the footer. Interestingly, I copied the generated HTML code an ...

Unique property in css without a specified value

I have a challenge in creating a custom CSS property to disable an element without using the disabled keyword. This is the code I came up with, but unfortunately, it did not achieve the desired result: <style> .admin { color: green; enable: ...

Display a div in front of another using Material UI when hovering

Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...