I am attempting to create a ul, where each li is set as contenteditable and has a delete button positioned to the left of that li.
My initial attempt looked like this:
<ul id='list'>
<li type='disc' id='li1' class='div' onkeydown='return func(event)' style='margin-left:0px;width:50%' contenteditable><button>delete</button></li>
</ul>
However, the button ended up being the editable item within the li instead of being positioned to the left.
One way to approach this is by creating a child <div> with the attribute contenteditable, along with a delete button, instead of directly editing the <li> element.
<ul id='list'>
<li type='disc' id='li1' class='div' onkeydown='return func(event)' style='margin-left:0px;width:50%' >
<div contenteditable></div>
<button>delete</button>
</li>
</ul>
This setup allows for easy positioning relative to the <li> element without actually having to edit it. You can see an example of this in action in this Demo.
Hopefully, I have grasped the essence of your issue.
Feel free to check out the fiddle
<ul id='items'>
<li type='circle' id='item1' class='box' onkeypress='return processKey(event)' contenteditable>This serves as an example text</li>
<li type='circle' id='item2' class='box' onkeypress='return processKey(event)' contenteditable>This serves as an example text</li>
<li type='circle' id='item3' class='box' onkeypress='return processKey(event)' contenteditable>This serves as an example text</li>
</ul>
#items {
position:relative;
}
#items li {
margin-left: 30px;
line-height: 25px;
margin-bottom: 5px;
}
#items li:before {
width: 50px;
line-height: 25px;
background-color: #ddd;
content: 'Remove';
position: absolute;
left: 0px;
text-align: center;
border: 1px solid #777;
}
Currently, I am working on a form that enables users to upload images. Once the user submits the form, my goal is to create thumbnails for each image on the front-end and save them on the server afterwards. Due to security restrictions, changing the value ...
I have a dynamic image stored on my web server at example.com/webcam.jpg that is continuously updated by the server. My goal is to display this image on a static HTML page with a looping effect that smoothly transitions from the previous image to the upda ...
Apologies for the ambiguous question title, it was difficult to come up with something more specific. I am currently exploring the Typescript implementation of Material-UI tables, specifically focusing on the table section titled "Sorting and selecting". ...
Recently, I implemented a jQuery code to automatically refresh a specific div. This auto-refresh feature uses AJAX to generate notifications whenever there is a new request from a client, similar to social network notifications. I even incorporated music f ...
Let's consider a situation where I have implemented a search function to make an HTTP call. Each call made can have varying durations, and it is crucial for the system to cancel any previous HTTP requests and only await results from the latest call. ...
I am struggling to make the Twitter Bootstrap carousel function properly. Although the slides automatically change after the default timeout, the indicators do not switch the active class, resulting in my carousel failing to transition between slides. Ini ...
Recently, I encountered a puzzling error message: vue-resource.common.js Uncaught TypeError: str.replace is not a function while working on an ajax call to retrieve some data: export default { data: () => ({ recipes: [] }), ready() { ...
I am currently in the process of automating a webpage built with Angular that features an auto-complete dropdown with numerous elements. My goal is to click on each individual element and verify if it populates all the fields below accordingly. Below is th ...
I'm attempting to create a space within a div's border that can accommodate an image, much like so: Is there a method to achieve this using only CSS? The only solution I have found is: .box { background: url(img.png) bottom left; border ...
I have a product search box that allows users to search by Cartridge Name or Printer Name. These are different SQL queries, so I have created separate PHP files for each query. However, I am facing challenges in using jQuery to check the value of the radio ...
I am currently using AngularJS ui-select's Multiselect feature. If you want to see how my multiselect looks, check it out here: http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview When arranging spans in multiple lines, achieving nice vertical align ...
Currently, I am facing a situation where I need to retrieve two different values (item.id and item.name) to set the State when selecting an item from my dropdown menu. Right now, I am only able to do this for one value (item.id). Is it possible to achieve ...
Hey there, I've come across a bit of a puzzling situation and I'm struggling to find the right words for the Title of this question. I have a javascript function that is supposed to trigger when the document has finished loading. In the initial p ...
From what I've learned, MUI 5 utilizes Emotion for its styling framework. Emotion offers a convenient helper function called css, which generates a string - a class name that can be used as a value for the className property or any other relevant prop ...
I am currently utilizing Laravel 8 as an API REST and encountering an issue where my token is null when sent in the AJAX request. I have successfully handled logins and requests without tokens, but this specific scenario has me puzzled. Within my JavaScri ...
My json file structure was as follows: [ { "name": "google", "route": "/google", "url": "www.google.com" }, { "name": "bing", "route": " ...
Hey fellow developers, I'm facing a challenge in my code and seeking advice from the experts out there. I'm attempting to retrieve JSON data from a specific URL, as shown below, and utilize it in a React component outside of the getWeather() fun ...
I have been working on a jQuery code snippet that works seamlessly across different origins: jQuery.ajax({ url: "http://example.appspot.com/rest/app", type: "POST", data: JSON.stringify({"foo":"bar"}), dataType: "json", contentType: "a ...
This is the code I have: index.js: import React from "react"; import ReactDOM from "react-dom"; import {dest, People} from './components/people'; import json from './people.json'; function initFromJson() { let names = []; for(let ...
My website is currently hosted on somee.com. To handle ajax requests, I have implemented JQuery. After each ajax request, the server appends a specific block of text to the returned result. "<!--SCRIPT GENERATED BY SERVER! PLEASE REMOVE--> <ce ...