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;
}
I'm currently facing an issue with my two dependent dropdowns, country and state. When I select a country, I use JavaScript to populate the respective states in the state dropdown. However, even though the options are added correctly when I inspect th ...
I am dealing with a JSON data structure that contains information about various teams. My task is to compare the values in the teams array with the values stored in html_content.position[i]. In this comparison, the index i needs to be dynamically set withi ...
Recently, I acquired some PHP scripts from a coworker that includes a search functionality for the "Notes" text field in a database named "Sheep". The search is conducted through a text box: https://i.sstatic.net/NbwMF.png Here is the code for the search ...
Check out this codepen example: http://codepen.io/anon/pen/EjKqbW I'm trying to reset the form elements when the user clicks on "Reset". The div elements f1,f2,f3 should be hidden and the searchText box cleared. However, the reset button is not trig ...
Trying to extract the text from the label GetName in a radgrid using jQuery. Need to iterate through each record to check the value of the label. Can anyone provide assistance? Thanks! Below is the code for my radgrid. <telerik:RadGrid ID="Gridview1 ...
I have encountered an issue with the material UI dropdown component that I am using. When I navigate through the dropdown options using arrow keys and press enter, the selected value does not get highlighted. Below is the code snippet for the dropdown: ...
I need some assistance in creating a basic monthly calendar using a table. Check out this demo: www.jsfiddle.net/pzdw0s2n/1/ ...
I am encountering an issue with redirecting to the login screen when there is no UABGlobalAdminId in my storage. I have tried using $urlRouterProvider.otherwise but it doesn't seem to be functioning properly. When I attempt to debug, the console does ...
I currently have four columns within a Grid container, each structured as follows: <Grid item> <Typography>Big Title 1</Typography> <Card className={classes.stretchMe}> <CardContent> ...
I'm currently enrolled in a NextJS course and I am interested in using Typescript. While browsing through a GitHub discussion forum, I came across an issue that I don't quite understand. The first function provided below seems to be throwing an e ...
I've reviewed the information provided in this link, but I'm still unsure about how to effectively utilize it. My requirement is straightforward—I need to update a parameter in the URL without constantly sending API requests, which are current ...
Is there a way to achieve the same functionality as this in AngularJS? I am familiar with jQuery but want to transition to AngularJS. Can AngularJS be used to customize directives for tasks like this? I have tried searching, but all I found was this, whic ...
In our use of DNN, we often encounter the need to pass specific context values (such as page id or module-on-page-id) into an AngularJS application. While we have established our own conventions for achieving this, we are interested in hearing about how ot ...
I have integrated Dexie.js with React for this specific example. However, the implementation details are not of great importance to me. My main focus is on finding out how to iterate through all objects in my IndexDB database using React. In the code snip ...
I am looking for a way to ensure that the subfooter div stays at the bottom of the childbox div, similar to a footer. You can view the code on this jsfiddle link <div class="parentbox"> <div class="childbox"> <div id="subfooter" ...
I need to filter or eliminate certain files from a FileList object that I obtained from a directory chooser. <input type="file" accept="image/*" webkitdirectory directory multiple> Within my .ts file: public fileChangeListener($event: any) { let ...
When it comes to processing forms, I want to use the jQuery $.ajax GET method so that the query parameters are included in the URL. If I handle the form without using jQuery, achieving this is not a problem. However, when I utilize jQuery's $.ajax met ...
Hey there fellow developers. I'm fairly new to react native and I'm trying to implement firebase authentication for a project. However, I'm stuck on how to include user name and country when using the standard auth().createUserWithEmailAndPa ...
I am trying to create a page with two columns of fixed height. The content in each column is generated using ng-repeat directive. Is it possible to implement scrolling within each column to a specific id using AngularJS? Code <div> Scroll to a p ...
Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...