Trying to come up with a solution to include checkboxes for each item in the list, maintaining even vertical alignment. The goal is to have the checkboxes in a straight vertical line rather than a zigzag pattern.
Wondering if this is achievable? Something similar to the following image:
I'm not entirely sure what your objective is, but I believe this will point you in the right direction.
.my-ul{
padding: 0;
margin-left: -24px;
}
.my-ul li{
list-style: none;
}<ul>
<li>Coffee
<ul class="my-ul">
<li>
<input id="nestle" type="checkbox">
<label for="nestle">Nestle</label>
</li>
<li>
<input id="cadbury" type="checkbox">
<label for="cadbury">Cadbury</label>
</li>
</ul>
</li>
<li>Tea</li>
<li>Milk</li>
</ul>Feel free to check out the link provided below.
style {
display: block;
padding-left: 15px;
text-indent: -15px;
}
box {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
To determine if the list item contains the input, you can apply the nopadding class to it.
$('li').has('input').addClass('nopadding');ul {
list-style: none;
padding-left: 0;
}
ul li {
padding-left: 40px;
}
ul > li > ul > li > input[type="checkbox"] {
margin-right: 23px;
}
.nopadding {
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type="checkbox">A
</li>
<li>
<input type="checkbox">B
<ul>
<li>
<input type="checkbox">Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>
<input type="checkbox">C
<ul>
<li>Sub Item 1</li>
<li>
<input type="checkbox">Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>I'm looking to develop a dynamic component that can retrieve and display data from a JSON file based on the URL path, rather than creating separate pages for each dataset. For instance: https://jsonplaceholder.typicode.com/posts If the page route is ...
After reading some documentation about v-select and slots, I am a bit confused about whether it can be applied to my specific scenario on this codepen. All I really need is to capture the selected text (not the value) and utilize it somewhere in the code: ...
It has come to my attention that there are wrappers available for many JavaScript libraries, but I seem to be unable to find anything substantial for jQuery. Could it be that I am simply not looking in the right places, and there actually exists a wrapper ...
I have been working on setting up a form submission process where a field within the form is connected to its own service in the application. My goal is to have the submit button trigger the service call for that specific field, wait for it to complete suc ...
Imagine having a server that sends back a response in the form of: { multiply:function(x,y) { return x*y; }, divide:function(x,y) { return x/y; } } Can this be converted into a functional method? I attempted to convert ...
What is the reason behind the block level element box appearing after the blue container's content instead of directly after the content box itself? Is it possible to achieve this using the CSS :after selector? TEST AREA CSS div{ background:#59 ...
While compiling the JSP template, I encountered the following exception: The method getFriendImage() is not recognized I attempted to rebuild the class without success. The src attribute contains a valid link to an image that is functioning properly. ...
I am currently working on a PHP file that is responsible for parsing a JSON list and then feeding it to a combobox: <?php $jsonData = '{"marco":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25484457464a6551405651 ...
Below is the configuration I have set up in my files: const express = require('express') const app = express() const port = 8000 const expense_model = require('./expense_model') app.use(express.json()); app.us ...
Currently, my AJAX calls over an SSL connection using the Prototype JS framework run smoothly initially. However, after 10 seconds of being live on the page, they start failing with a status of 0 or 'canceled' in the Network Inspector... This is ...
Just delving into the world of SignalR for the first time and I've encountered some hurdles. My objective is to dynamically update my jTable when a user adds a new user to the system asynchronously. However, every time I attempt to submit, I come acro ...
There are 4 tabs available on a JSP page: Tab 1, Tab2, Tab3, and Tab4. Initially, only Tab1 is enabled, allowing users to freely work within that tab. However, Tabs 2, 3, and 4 are disabled, preventing users from accessing their contents. A checkbox is lo ...
I have successfully implemented v-for for a URL path. Now, I am looking to merge the URL path with the query string in the router link tag. The query string will be the date from each item rendered by v-for. Is there a way to dynamically pass this query ...
Currently, I am utilizing the VuetifyJS framework for VueJS and I am interested in replicating the swipe between tabs transition seen in WhatsApp for Android. In WhatsApp, you have the ability to swipe left or right to view a new section as you swipe. Vue ...
My API is supposed to receive data for saving in the database. However, when I call the PUT method, my req.body.nome returns empty. It works fine with form-urlencoded, but I've tried using body-parser and it's deprecated. Here is my request usin ...
I'm new to utilizing bootstrap in web development. I've been exploring various examples of bootstrap templates that include tables, and I noticed that when I resize my browser window, the table adjusts accordingly. Now, I'm curious to know ...
Looking to extract the value upon form submission in Angular, here is the code: In my Typescript: constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public formBuilder: FormBuilder, public alertCtrl ...
I'm facing an issue with integrating my own npm package into a Rails application that I have developed. It's unclear whether the problem lies in the creation of the node package or within the rails app itself. The package in question is fairly ...
Asking for help with converting a "boolean bit array" to a number: const array: boolean[] = [false, true, false, true]; // 0101 Any ideas on how to achieve the number 5 from this? Appreciate any suggestions. Thanks! ...
I am currently working on a project where I have a button icon that I want to change upon clicking it. I am using the following jQuery code: <script> $('div[id^="module-tab-"]').click(function(){ $(this).next('.hi').sl ...