Is there a way to calculate the Total LI width and then set the width for the parent div?
Here is an example of my code:
<ul>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
</ul>
This is the CSS style I am using:
ul li{width:400px;float:left;}
Try out this code snippet
<script type="text/javascript" src="public/js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('.nested_li ul').each(function(){
var liItems = $(this);
var TotalWidth = 0;
if(liItems.children('li').length >= 1){
$(this).children('li').each(function(index, element){
TotalWidth += $(element).outerWidth(true);
});
$(this).width(TotalWidth+1);
}
});
});
</script>
I am encountering an issue while attempting to utilize an ajax post request to retrieve data from my database. I am struggling to properly send the necessary data, specifically the country name, to my ajax hook. Here is my JavaScript code: $.ajax({ ...
Is there a way to make the buttons in the AngularJS + AngularStrap modal more dynamic? Currently, they display static content, but I would like them to show the content of the first column (first name) of the exact row where the button was clicked. What is ...
When my iPython displays a long list, it appears as one tall column instead of utilizing the full width of the terminal screen. I have attempted to adjust the CSS in '.ipython/profile_default/static/custom/custom.css' by setting '.container ...
I've successfully implemented Google Maps V3 in my project, but I'm encountering an issue with grey tiles appearing on the map. I attempted to fix this problem by triggering a resize event using the following code snippet: google.maps.event.trig ...
Is there a way to write multiple formulas in CSS, or is there an alternative method I should consider? I want to integrate these formulas on my quiz website for students to use. I came across some intriguing examples that could be useful: However, I am s ...
When working with a DTO that has attributes id, name, and text, I am creating a list of these DTOs and passing them to my JSP using model.addAttribute. In the JSP, I am rendering a Spring list in the following way: <form:select path="notificationsId" i ...
I'm struggling to incorporate the bootstrap class "form-control" into all of the woocommerce address fields in my account and during the checkout process. Essentially, I am attempting to apply the "form-control" class to both the billing and shipping ...
I am looking to adjust the positioning of the number "01 / 04" to match the layout shown in this image: Here is what I have accomplished so far: This is how the code structure looks like in vue js at the moment: <img id="theZoomImage" sizes="100vw" : ...
Dealing with a JavaScript string that includes a quote mark can cause some difficulties. For example, strings like Don't click this checkbox or He said "hi" pose unique challenges when trying to find an exact match in a checkbox value. Consider the H ...
I have recently designed a card using Bootstrap and I would like to include a table with some data in it. However, I am facing an issue where the table data spills out of the card when I reduce the screen size for responsiveness testing. Could someone pl ...
If you could kindly click on this link & use CTRL + F to search for the text "Info", you will see a visual representation similar to the image below. There seems to be quite a bit of empty space below these texts. I experimented with padding, display: ...
I am currently working on a PHP website project. I have implemented the include function in my main page to include other files, but I am facing an issue with the CSS when loading the main page. The CSS in the included files seems to be all messed up, maki ...
Hey there, I am using an HTML5 video. This is just an example <video width="320" id="video" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video1.mp4" type="video/mp4"> <source src="movie.ogg" typ ...
I am fairly new to working with PHP and MySQL, so I have been using the mysql_* functions despite knowing that they are no longer supported. However, I can't seem to find anyone else who has had a similar question to mine, which is why I am reaching o ...
I have been working on styling a React project where App.js mainly handles routing and navigation to its components: App.js import {useState, useEffect} from 'react'; import Models from './pages/Models'; import Loadingpage from ' ...
When working with Puppeteer, I am faced with the challenge of clicking on a web button that has a dynamic id like: #product-6852370-Size. Typically, I would use the following code: page.click('#product-6852370-Size'); However, the number withi ...
I am currently working on a project for one of my courses, where I have created a website for a specific service. However, I am facing some challenges and things are not going as smoothly as I had hoped. Here is a screenshot of the page: https://i.stack.im ...
Encountering an unusual issue while trying to assign an item a second time. Initial scenario: I am working with a jqxTree containing various items as shown below: - apple - oracle - microsoft When I drag and drop one item into another, the structure loo ...
I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...
For my CFWheels Coldfusion project, I have been utilizing Adobe Coldfusion Builder 3. In Coldfusion, when you want to output a variable, you typically do something like this: #variable_name# However, I am interested in incorporating an empty link into m ...