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>Is it possible to set a background image for a button in HTML with a transparent background using CSS? Here is the HTML code I currently have: <button style="background-image: url('../images/example.png');"></button> ...
books.component.ts export class BooksComponent implements OnInit { public sortOrder; ... books.component.html <div class="form-group"> <label for="selectOrder">Sort</label> <select class="form ...
I'm facing an issue with my website's front page design, where a div is divided into two sections using the Twitter Bootstrap grid system. When the second grid (span9) is taller than the first (span3), the image perfectly fills up the span9 area ...
Trying to find a way to work around Bootstrap rows. I have multiple col-..-.. items that I need to fit into one row, but modifying 8 complex .js files is not an option for me - and they refer to the children of the div I used as a bootstrap row. HTML manip ...
I am working on creating an update form in Angular 6 using FormArray. Below is the code snippet I have in editfrom.TS : // Initialising FormArray valueIngrident = new FormArray([]); constructor(private brandService: BrandService, private PValueInfoSe ...
How can I create a wrapper function for axios? I am looking to create a function that can return axios, allowing for easy substitution with another fetch API in the future. This is what I have attempted so far: import axios from 'axios' expor ...
HTML: <form method="post" action="create.php"> Job #: <input type="text" name="jobnum"> <br> Program: <input type="text" name="program"><br /> Ship Date: <input type="text" name="shipdate"><br /> Description: < ...
Utilizing an axios ajax request, I am retrieving a JSON list of tags related to a specific topic selected from a dropdown. If no topic is chosen, all tags in the database (approximately 100-200 tags) are fetched. The process involves: User selects a topi ...
Utilizing <Suspense>, I am handling multiple requests in my child component using the await keyword: await store.dispatch("product/getProduct", route.params.id).then(res => productData.value = res); await store.dispatch("product/get ...
After searching various resources for solutions to my issue, I stumbled upon this helpful and . Both of these links provided valuable insights. The issue I'm facing is that one of my templates is loading twice - first with the collection undefined, ...
Below is the html code for the date field : <div class='form-group'> <label>Check out</label> <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" plac ...
Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...
I am currently using the jQuery multiselect API in my application to allow users to select multiple values. However, I am facing an issue where I need to fetch all the selected values when a button next to the multiselect box is clicked. Unfortunately, I h ...
After attempting to extract the list data from every drop-down menu on this page, I managed to access the 'li' tag section and retrieve the 'href' data using Selenium Python 3.6. However, I encountered an issue when trying to obtain the ...
Is there a way to include the reload option in a ui-sref markup without using the javascript function directly? <a ui-sref="app.editPost({new:true}, {reload:true})">new post</a> I've tried this approach, but it doesn't seem to be wo ...
I recently created my second app clone using React. I have noticed that after deployment, the size of the app increases. Everything looks normal on localhost:3000, but it significantly grows once deployed. Any assistance in resolving this issue would be gr ...
I am struggling to make my Ajax form submit only after the jQuery validation function has been completed. Below is the code I have been working with... http://jsfiddle.net/gbaH7/16/ The validation plugin that I have used can be found at ...
My challenge is that when the content in a box overflows, the box size increases and pushes the icons out of place. I want to ensure that the icons remain in a fixed position. This is how it currently looks: The comment, delete, and likes count end up on ...
I am working with two different interfaces: interface PersonRequirements{ user:string, password:string, id:number } export interface Requirement<R> { name: keyof R & string, save: () => any,/* I want this return type to be ...
It's puzzling to me where the extra space in my footer is coming from. It seems to be around 20-30px as you can see on the following url: Despite the code in my footer being minimal, with no apparent cause for this additional space below my social ic ...