JavaScript code snippet here...CSS code snippet here...HTML code snippet here...JavaScript code snippet here...CSS code snippet here...HTML code snippet here...Make sure to include vertical-align: top; in the styling of .item-box
$(function() {
$(".swim-lane-wrapper")
.sortable({
axis: "Y",
handle: ".category-box",
connectWith: ".swim-lane-wrapper",
})
.disableSelection();
});
$(function() {
$(".sortable")
.sortable({
connectWith: ".sortable",
})
.disableSelection();
});.swim-lane {
display: inline-block;
white-space: nowrap;
float: left;
width: 90%;
height: 100px;
border: 1px solid red;
}
.category-box {
display: inline-block;
white-space: nowrap;
float: left;
background-color: #FFF3CC;
border: #DFBC6A 1px solid;
width: 75px;
height: 50px;
margin: 5px;
padding: 10px;
font-size: 12px;
white-space: normal;
text-align: center;
box-shadow: 2px 2px 2px #999;
cursor: move;
}
.item-box {
display: inline-block;
vertical-align: top;
background-color: #edf3ff;
border: #6d71db 1px solid;
width: 75px;
height: 50px;
margin: 5px;
padding: 10px;
font-size: 12px;
white-space: normal;
text-align: center;
box-shadow: 2px 2px 2px #999;
cursor: move;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylsheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<div class="swim-lane-wrapper">
<!-- Row One -->
<div class="swim-lane">
<div class="category-box">"Category 1"</div>
<div class="sortable">
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
</div>
</div>
<!-- Row Two -->
<div class="swim-lane">
<div class="category-box">"Category 2"</div>
<div class="sortable">
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
</div>
</div>
</div>While I agree with the answer provided by @manuel, I wanted to offer some insight into why this issue occurs. In the UI sortable feature, a temporary placeholder is utilized with the class name .ui-sortable-placeholder in place of the item being moved. This hidden element matches the dimensions of the original element and does not have any additional styling applied to it, nor is it defined in the UI CSS file.
To control the height of this invisible placeholder element and prevent neighboring elements from shifting out of place, you can use the following somewhat unconventional style:
.ui-sortable-placeholder {
display: inline-block;
height: 1px;
}
Shoutout to @pratik-wadekar for the amazing help in creating a working text animation. However, I encountered an issue when testing it on various screen sizes and mobile devices - the animated word plants breaks into pieces like PLA on one line and NTS on ...
In my database, there is a table with a Date field. I noticed that when I try to insert a date using Postman through the API like this: { "registerDate" : "2014-06-02" } It successfully inserts the date. However, when I attempt to do the same using ...
Currently, I am utilizing material ui to establish a grid system for showcasing videos in 2 rows. While I have successfully set up the general layout, I am facing difficulty in eliminating the white space/padding between the elements. Despite trying nowrap ...
After defining these two Sequelize models: export class Users extends Model<Users> { @HasMany(() => UserRoles) @Column({ primaryKey: true, allowNull: false, unique: true }) UserId: string; @Column({ allowNull: false, unique: tru ...
Is there a way to set a global AJAX handler that will only be called if an error handler is not already defined for a specific AJAX call? Some of my AJAX calls need to execute certain logic if an error occurs (such as re-enabling a button), while others s ...
I am trying to create a basic card using bootstrap 4 with the following HTML code. My goal is to change the style of the card when it is clicked, but not when the buttons inside the card are clicked. Currently, clicking on the test1 button triggers both ...
In my form, I have the following code: <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-label"> States ...
Embarking on my journey of creating webpages, I am eager to replicate the Windows 10 start UI and its browser animations. However, my lack of JavaScript knowledge presents a challenge. Any help in reviewing my code for potential issues would be greatly app ...
This question seems to be more related to JavaScript/jQuery/DOM rather than Rails, but it's all linked to how I integrated it in Rails. I'm currently working on allowing users to upload multiple photos while creating a new object (auction). The c ...
My journey with React is just beginning, so forgive me if this question seems basic. I have a delete icon in one of my files, and when it's clicked, I want to display a confirmation dialog box. I found an example on the official Material-UI website: h ...
I need help with removing elements from one comma-separated string based on another. String 1: 6,2 String 2: 1,2,4,5,6,7,9,12,13 Is there a function or method that can accomplish this task for me? ...
Which libraries do you rely on for managing user roles in your React projects? All suggestions and advice are appreciated. Specifically, I am interested in controlling the visibility of different application components based on the user's role. ...
I applied an opacity effect to the white background of each post with the following CSS: .post{ background: white; opacity: 0.75; border-radius: 0px 0px 6px 0px; } However, this opacity effect is also affecting the images in each post, which ...
How can I achieve a zebra color effect in every other cell of a rich:dataTable using CSS? <rich:dataTable value="#{uploader.files}" var="_data" id="files"> <rich:column> <f:facet name="header"> <h:outputText ...
My attempts to replicate my local setup into Github CI are not successful. Even simple commands like ls are not working as expected. However, the installation of TypeScript and Jest appears to be successful locally. During the Github CI run, I see a list ...
I am currently working on updating my webpage and facing a few challenges that I would appreciate some assistance with: One issue is that the images on my page do not adjust to the size of the browser window. As a result, when I resize the window, the i ...
I am encountering an issue with my bootstrap navbar where the button does not appear on the mobile version. This is happening while testing on my Windows Phone. Below is the code for my navbar: <nav class="navbar navbar-default navbar-fixed-top" ro ...
I am working with 4 divs and trying to adjust the size of the inner divs in relation to the parent divs dynamically. I have added a .top class, but I'm unsure if it is necessary or beneficial. Here is my fiddle for testing purposes: http://jsfiddle.n ...
var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...
After spending several days trying to solve this issue, I've decided to seek help. The problem at hand is disabling dates in my bootstrap datepicker using the following HTML code: <head> <!-- Required meta tags --> <meta charset="utf-8 ...