When the input is too short for the entire text to be displayed, users have the option to horizontally scroll the text inside the input by dragging with the mouse. Is there a way to implement this functionality in a contenteditable field that appears as an input?
<div contenteditable="true">...insert some lengthy text here...</div>
Your response makes sense to me, and it appears that setting overflow:hidden on the contenteditable element results in this default behavior. By using white-space:nowrap along with some CSS adjustments, you can create custom <input> elements (similar to those found in MacOS Safari):
[contenteditable] {
display: inline-block;
box-sizing: border-box;
max-width: 146px;
border: 1px solid #ccc;
padding: 3px;
margin: 0 2px;
font-size: 11px;
font-family: system-ui, sans-serif;
overflow: hidden; /* this is the key */
white-space: nowrap;
}
label {
display: block;
text-align: right;
}<label>Input: <input value="Lorem ipsum dolor amet slow-carb drinking vinegar actually green juice hell of literally locavore sriracha keytar health goth cold-pressed seitan bushwick quinoa. 8-bit iceland microdosing, prism hell of lyft cold-pressed cloud bread retro live-edge hammock. Tilde fanny pack street art green juice tote bag everyday carry. Kickstarter retro +1, mumblecore echo park next level heirloom adaptogen air plant locavore helvetica. Copper mug craft beer neutra, sriracha chartreuse shoreditch man bun ugh vice ethical authentic."></label>
<label>Contenteditable: <div contenteditable>Lorem ipsum dolor amet slow-carb drinking vinegar actually green juice hell of literally locavore sriracha keytar health goth cold-pressed seitan bushwick quinoa. 8-bit iceland microdosing, prism hell of lyft cold-pressed cloud bread retro live-edge hammock. Tilde fanny pack street art green juice tote bag everyday carry. Kickstarter retro +1, mumblecore echo park next level heirloom adaptogen air plant locavore helvetica. Copper mug craft beer neutra, sriracha chartreuse shoreditch man bun ugh vice ethical authentic.</div></label>Currently, I'm in the process of integrating Sanity into my blog. Using the json object returned from a query with useState, I managed to display my posts successfully. However, I am now faced with the challenge of populating a React-Modal with the ap ...
I am new to using WebStorm 7 and currently working on building a simple HTML/CSS website. Initially, I included my CSS within the HTML file using the style tag, but now I have decided to move it to a separate file. Auto completion is functioning for all h ...
I am relatively new to CSS and came across an issue with Skeleton when resizing the browser window. I have an image and text displayed next to each other in columns, as shown below (although there is much more text in reality). Everything looks fine initia ...
Below is the HTML code snippet I am working with: <div class="col-sm-8"> <div class="row col-sm-12 pull-right paddingDiv"> <div class="col-sm-12"> <div class="marginBottom pull-right"> <bu ...
Currently, I am in the process of converting a CSV file to an HTML table by utilizing a tool available at . However, I am facing a challenge in modifying the background color of cells based on their values. I would greatly appreciate any help or guidance w ...
Due to an issue present in Protractor 3.3.0 with getMultiCapabilities, we had to install the latest version directly from GitHub where a fix has been implemented (refer to the fix scheduled for Protractor 3.4). To include this fix, we updated our package. ...
I'm facing an issue with storing JSON data received via AJAX in an external variable for future use. I came across this answer on Stack Overflow (load json into variable), which provided some basic insights, but it seems like I might be missing someth ...
It seems like a simple issue, but I'm struggling to retrieve information from my "body" when utilizing the get method. I've experimented with various approaches to extract the data, but nothing seems to work. Any guidance would be greatly appreci ...
In my Laravel project, I am facing an issue with the patient history form. The content overflows under a div as shown in the image below. View first image To address this problem, I tried using overflow:hidden in the CSS section. However, this caused my ...
I encountered an error while creating a relationship between two nodes that were generated within the code. Can someone advise me on the correct arguments for the function below and its proper formatting? node1.createRelationshipTo(node2, "some", {age:" ...
How can I enforce a specific sequence for user input, restricting the first two characters to alphabets, the next two to numbers, the following two to characters, and the last four to numbers? I need to maintain the correct format of an Indian vehicle regi ...
I'm new to all of this, so I believe it's a simple mistake on my end, but I can't seem to get it to work. After deploying the code below and clicking on the button, nothing happens. When I inspect the html in my browser, I see an error mess ...
I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...
Is there a way to trigger events after an oscillator finishes playing using the webaudio API? I am attempting to update my Vue component reactively to display data in the DOM while a note is being played. Here's a snippet of my code: <template> ...
As I embark on refactoring my previous Shopify project, I encounter an issue when executing the command "shopify node serve" which prompts the following error message. "This command can only be run within node projects." Despite this error message, my pr ...
I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new l ...
Exploring the potential of a collapsible panel to meet my requirements $(".sport").on("click", function() { var thisId = $(this).attr("id"); var thisChildren = $(this) + ".sportlist"; $(thisChildren).each(function(index) { }); }); <link ...
After setting up a NodeJS server and connecting it to a MySQL database with around 5000 users, I needed to read the data from MySQL and update a MongoDB database. I managed to write code for this process. https://gist.github.com/chanakaDe/aa9d6a511070c3c78 ...
I am attempting to utilize the Yahoo Finance API to retrieve data in CSV format through Javascript. However, my current implementation shown below is not successful. $.ajax({ type: "GET", url: "http://finance.yahoo.com/d/quotes.csv?s=RHT+MSFT&f=sb2b3j ...
I am trying to center align the elements in my icon-div as shown in the wireframe image. What steps should I take to achieve this layout? HTML: <div class="icons_div"> <div class="row bg-secondary"> <div class="col-sm-2"> ...