The surprising height discrepancy in the li element while using the jQuery sortable plugin

After implementing this plugin, everything was running smoothly except for one minor bug that I encountered - the li element was displaying an unexpected height. To replicate this issue, follow these steps: 1. Open the sortable demo in Internet Explorer and inspect the ul list. 2. In the developer tools CSS, add the following styles to the '#sortable' to divide the list into 2 columns:

column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 0em;
-moz-column-gap: 0em;
-webkit-column-gap: 0em;
  1. Observe that the 4th element is divided in half on each side. Try dragging the 4th item in the list and observe the height of the li element.

Link to the sortable plugin: jQuery-ui-Sortable Demo

I'm looking forward to a quick fix for this issue.

jquerycssjquery-uijquery-ui-sortablecolumn-count

Answer №1

#sortable li {
   break-inside: avoid;
}

Implementing break-inside on the li element successfully resolved my issue.

Answer №2

Have you considered applying CSS to style the "li" elements within the "#sortable" container in order to create a two-column list layout? For instance:

#sortable li {
    display: inline-block;
}

Adjust the width of the "li" elements as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the getJSON function within jQuery

{ "Emily":{ "Math":"87", "Science":"91", "Email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6f7e767c51767b727e737f764f747879">[email protected]</a>", "City":"Chicago" }, "Sa ...

javascriptjqueryjsonjsonp

Approach to converting between metric and imperial measurements for weight and height

When prompting users to enter their weight, it's important to consider both metric and imperial units. One convenient approach might be to provide a dropdown menu for users to choose their preferred unit of measurement before filling in the correspond ...

jqueryhtmlformsservletsweb

Why won't the value in jQuery attr() be updated?

Just joined this platform for the first time and can't seem to find a similar issue posted before.. :( I'm currently trying to catch up with jQuery and JavaScript. My problem is that I want to dynamically change the href attribute of an anchor e ...

jquery

Navigational Scroll Parallax Issues

I have been trying to implement a basic 2 layer parallax effect using ScrollMagic on my index page. The layout consists of a large image with content below it, but I am facing some challenges. Despite going through the documentation and source code multipl ...

jqueryhtmlcssparallaxscrollmagic

"Setting up a filter for the first row in an Excel-like table using a pin header

Does anyone know how to create a table filter in Excel where the header and first row stay pinned while scrolling down, even after applying filters? Here is a JSFiddle demonstrating the issue: http://jsfiddle.net/6ng3bz5c/1/ I have attempted the followi ...

jquerycssangularjshtml-tablescroll

Transfer the @font-face declaration from the global CSS file into the MUI Theme

In my project, I have an index.css file that includes the following @font-face declaration: //Index.css ... @font-face { font-family: "My Font"; font-style: normal; font-display: swap; font-weight: 400; src: url(/public/fonts/my-font.eo ...

cssreactjsmaterial-uifontsfont-face

Add a fresh text field with the click of a button and delete it with another button in Laravel 4

My form includes two fields: phone and email, as shown in the image below. By clicking on the plus button, I would like to add an additional text field to the form below the button. Similarly, by clicking on the minus button, I want to remove the text fie ...

javascriptphpjqueryhtmllaravel-4

The options for answering (True, False, Yes, and No) are not currently visible

I am struggling with displaying buttons for "True", "False", "Yes", and "No" in an appended row. Here is the application: Application To use the application, follow these steps: 1. Open the application and click on the green plus button. A modal window ...

javascriptjqueryhtml

"Enhance your website with the ability to dynamically load and display

I am facing a little issue and need suggestions because I am struggling with inserting data into an HTML page using the append jQuery function and AJAX request. Within my HTML block, under ul elements, there are some images that I directly insert into the ...

jqueryhtmlajaxappendinstagram

The most efficient method for interacting with externally generated HTML in Rails

For my Rails page help documentation, I utilized the HelpNDoc help authoring tool to generate a folder containing HTML pages and additional folders for JavaScript, images, stylesheets, and libraries. Now I am seeking the most efficient way to integrate thi ...

htmlcssruby-on-rails-4helpndoc

Unlocking supplemental JSON data in a Dynatable AJAX query

I have implemented the dynatable.com plugin to generate a table of schools from our database. The table is dynamic and can be filtered, so it does not always display the total number of schools. While we do not include a 'number of pupils' column ...

javascriptjqueryjsonajaxdynatable

What is the method for striking through a line in a table?

I developed a unique jQuery script: <script type="text/javascript"> $(document).ready(function () { $('tr.inactive').each(function (index) { var tr = $(this); tr.find('td:first').after(function ...

javascriptjqueryhtml-table

Utilize select2 for dynamically loading an external html component

When the page is loaded, it includes another HTML page with a select element that I want to style using select2. The basic page structure looks like this: <select class="selectAddItem" id="selectAddItem" name="selectAddItem" style="width: 150px;" clas ...

javascriptjqueryajaxjquery-select2

I have decided to integrate Laravel with Vite for building CSS and JS. However, when I attempted to run `npm run dev`, it appeared to execute but was accompanied by an error in the background that

Hi there, I'm new to Laravel and I've created a small app that primarily uses CSS and JS scripts. Everything was working fine in my development environment, so I decided to push it to a production server. However, after installation, my code does ...

javascriptcsslaravelnpmvite

The website runs quickly on my computer, but lags when deployed to the

With the development of my WordPress site that heavily utilizes custom Ajax for search result loading, I have encountered a discrepancy in performance between my local environment and VPS. On my HP laptop running WAMP, the site performs excellently with A ...

mysqlajaxperformancejquery

Guide to incorporating Jquery-Comment into Angular versions 2 and beyond

I've incorporated the Jquery-Comment plugin into my Angular 2 project by adding the necessary script and css files to my Index.html page. However, when initializing the Comment TextBox id within a script tag, I encountered an error in the console. ...

jqueryangularnpm

Struggling with JQuery to revert an element back to its original position after the mouseout event

Hello all, I'm a newcomer here and I've been trying my hand at some basic JQuery. However, I've encountered an issue that I could use some help with. Have you ever come across those boxes on websites where when you hover over them, an arrow ...

javascriptjquerycssjquery-animateslide

What is the best way to adjust the dimensions of a blank image without altering the size of

I am attempting to set the size of an empty image to 150px. While using float: left works on Firefox, it does not have the same effect on Google Chrome. Here is the HTML code: <div> <img src='some broken url' alt='no image'& ...

htmlcss

Adjust the navigation height to be proportional to the main content size

I've been attempting to make my navigation menu take up the entire page, but I have yet to achieve success: My goal is for the green menu section to extend down to the footer. Here is the HTML code: <div ...

htmlcss

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet: <div id="instructions"> <h3>Get it done</h3> <ol> <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li> <li>Then whisk ...

javascripthtmlcsstags