I need help with a jQuery sortable feature where I have two lists and can move items between them:
$( '#productsList, #orderList' )
.sortable({connectWith: '.containerDiv'})
.disableSelection();
My issue arises when I try to implement custom scroll bars and set overflow:hidden; on the lists with a max-height:400px.
Setting overflow hidden causes items to disappear when dragged outside one div, but not setting it results in default scroll bars. Any suggestions?
Thank you.
By simply removing the style position:relative from your lists, you can achieve the desired outcome.
Check out this link for more details.
Edit:
I initially believed that using the appendTo option would resolve the issue, and my intuition was correct. After some additional tweaking, I successfully got it to work. This approach allows you to retain the position:relative if necessary.
Although this ticket may be a bit old, I encountered a similar issue while using my custom scrollbar solution and trying to drag between Sortable elements with overflow hidden. Upon adding some code to address the compatibility of Sortable with my Scrollpane, I noticed a potential oversight in the appendTo functionality.
The current implementation of appendTo only appends the helper to the target if it is not already present in the DOM. This explains why the clone option works for some cases but not others (which I won't delve into here). The crucial step to resolve this was to incorporate the following code towards the end of the _mouseStart function within the widget:
if (!this.helper.parent().is(this.appendTo)) {
this.helper.detach().appendTo(this.appendTo);
// update position
this.offset.parent = this._getParentOffset();
}
It's worth noting that this.appendTo is defined earlier in the function as follows:
this.appendTo = $( o.appendTo !== "parent" ?
o.appendTo :
this.currentItem.parent() );
By implementing this fix, I specified an appendTo targeting the div containing both Sortable elements, effectively resolving the overflow problem.
You can find the complete solution, including other fixes, in the scrollsortable JS file for jQuery-UI-ScrollPane at: https://github.com/borgboyone/jQuery-UI-ScrollPane.
Cheers!
Exactly as the headline suggests. If not, what are some reliable online services you've tried for decluttering oversized stylesheets? ...
When starting with Angular.js, there are various boilerplate kits available such as angular-seed, some incorporating requirejs and more. However, many of the options I've come across seem to be outdated. As a newcomer to Angular, I'm wondering if ...
Looking for help with displaying news on your CMS page? You may have encountered an issue trying to show the title and content in two columns within a row. Here is some CSS code that might guide you in the right direction: *{ margin:0; padding:0; ...
I have a code snippet with one row and two columns. I would like to embed a video from Vimeo in the first column so that it fills the entire column without any padding. Additionally, I want the two columns to be right next to each other with no space betwe ...
Below is the code snippet I am working with: class MessageList extends Component { render () { return ( <ul> { this.props.messages.map((message) => { return <Message key={message.id} message={message} ...
I'm relatively new to Angular and I'm interested in finding a more efficient solution for this particular task. The code below functions correctly, but I am uncertain if it is the best approach to achieve the desired outcome. HTML <div ng-a ...
Hello, I am embarking on my journey with PHP coding and encountering some challenges. Specifically, I am trying to incorporate a delete button for each row in my code, but unfortunately, it doesn't seem to be functioning as expected. Below is the sn ...
I'm facing a design issue with a row that has two columns - one with an image and the other with a list of users in a modal window. As more users are loaded when scrolling down the modal, I want the image to remain fixed in its position. Here's t ...
I recently set up mitt and I'm facing difficulties dispatching events to another component. The issue arises due to the absence of this in the setup() method, making it challenging to access the app instance. Here's my current approach: import A ...
Is it possible to create a multicolumn layout in HTML that flows from left to right, rather than top to bottom? I am looking to define the height and width of each text column div, so that when the text overflows the box, a new column is automatically ge ...
After successfully creating a background with 3 images using keyframes in my initial project built with html and css, I decided to recreate the project using NextJS. However, I encountered an issue where the third image does not display in NextJS. Instead ...
Currently, I am working on integrating the Semantic UI React modal into my dashboard application built using React. To facilitate this integration, I have developed a ModalManager component that will be utilized in conjunction with Redux to handle the stat ...
How can I create a button that matches the attached image using CSS? I know how to achieve the border-radius, but I'm struggling with the color. Any tips? I attempted something like this: .button { border-radius: 0 4px 4px 0; background-ima ...
I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...
It appears that in browser-javascript hover events are deactivated when the mouse button is pressed down, as demonstrated by the following example: (Please run the code snippet to witness what I am referring to.) * { user-select: none; } #click, #drag, ...
My plan is to create a variable by extracting an attribute's value in order to add a new object using that variable as the value of another attribute... In my media search site, I am working with a restricted environment where I cannot fully configur ...
For my VueJs project, I am utilizing the popular vue-select component. I wanted to customize a keyDownEvent and consulted the documentation for guidance. However, I found the example provided using a mix of modern JS techniques to be quite cryptic. <tem ...
From what I understand, there is no .toObect() function in JavaScript, but it is used in mongoose to convert mongoose documents into objects so that JavaScript built-in functions can be used. I sometimes struggle with when to use it. There are instances w ...
Describing my issue clearly, I am using PHP to retrieve data from MySQL. The table contains multiple records. To display table records, I have implemented a while loop with mysqli_fetch_array() as the condition. These records need to be echoed out (in HT ...
Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...