Twitter Bootstrap Question posted in

When clicking and dragging sortable jQuery div, the item jumps from middle of browser to the left-Twitter bootstrap

When sorting an item in a sortable list, the item jumps from its center position in the browser to the far left while sorting/dragging.

Hit add task twice, and then sort an item into new position and you’ll see what I’m talking about.

$(document).ready(function() {
  $(function() {
    $('#sortable').sortable();
    $('#sortable').disableSelection();

  });

  $(document).ready(function() {
    $('#add').on('click', () => {
      $('.ul').append(
        '<div class="divvy">' +
        '<input type="text" class="inputty"/><button class="remove" id="deletestyle" style="float: right;"> X </button>' +
        '<div class="detailcontainer" style="float: left;" > <p>▼</p></div><div class="panel">' +
        '<form class="form-inline"><p>Details</p><br><textarea name="details" rows="6" cols="15">' +
        '</textarea><p>Due Date</p><input type="date" name="date" style="margin-bottom: 25px; width: 127px;"></form></div></div>');
    });

    $('.ul').on('click', '.detailcontainer', function() {
      $(this).closest('.divvy').find('.panel').toggle();
    });
  });

  $('.panel').hide();
  $('.optionBox').on('click', '.remove', function() {
    $(this).parent().fadeOut(400, function() {
      $(this).remove();
    });
  });
});
.panel {
  display: none;
}

.center {
  text-align: center;
  margin-top: 58px;
}

.center div {
  margin: 0 auto;
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

#deletestyle {
  background: #f04d25;
  border: solid 1px white;
  color: white;
  font-weight: 700;
  height: 45px;
  width: 10%;
  border-radius: 0px;
}

.divvy {
  border: solid 1px black;
  padding: 10px;
  width: 35%;
  border-radius: 2px;
  background: #C0C0C0;
  position: relative;
  min-width: 325px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
}

.divvy:hover {
  border: solid 2px darkgray;
  padding: 10px;
  width: 35%;
  border-radius: 2px;
  background: #C0C0C0;
  min-width: 325px;
  margin: 0 auto;
}

.divvy:active {
  border: solid 2px darkgray;
  padding: 10px;
  width: 35%;
  border-radius: 2px;
  background: #C0C0C0;
  -webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
  min-width: 325px;
  margin: 0 auto;
}

.inputty {
  width: 75%;
  height: 45px;
  font-size: 22px;
  font-family: 'work sans';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="center">
  <div class="optionBox" style="position: relative;">
    <button class="addtask" id="add" class="center">＋  ADD TASK</button>
    <div id="sortable" class="ul" class="center"></div>
  </div>
</div>

(fiddle)

Tags:

2

Answers


  1. 0

    You could simply add to your .divvy class : 

    .divvy {
  top:0;
  right:0;
  left:0;
}

    $(document).ready(function() {

  $(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
  });

  $(document).ready(function() {
    $('#add').on('click', () => {
      $('.ul').append(
        '<div class="divvy">' +
        '<input type="text" class="inputty"/><button class="remove" id="deletestyle" style="float: right;"> X </button>' +
        '<div class="detailcontainer" style="float: left;" > <p>▼</p></div><div class="panel">' +
        '<form class="form-inline"><p>Details</p><br><textarea name="details" rows="6" cols="15">' +
        '</textarea><p>Due Date</p><input type="date" name="date" style="margin-bottom: 25px; width: 127px;"></form></div></div>');
    });

    $('.ul').on('click', '.detailcontainer', function() {
      $(this).closest('.divvy').find('.panel').toggle();
    });
  });

  $('.panel').hide();

  $('.optionBox').on('click', '.remove', function() {
    $(this).parent().fadeOut(400, function() {
      $(this).remove();
    });
  });
});
    .panel {
  display: none;
}

.center {
  text-align: center;
  margin-top: 58px;
}

.center div {
  margin: 0 auto;
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

#deletestyle {
  background: #f04d25;
  border: solid 1px white;
  color: white;
  font-weight: 700;
  height: 45px;
  width: 10%;
  border-radius: 0px;
}

.divvy {
  border: solid 1px black;
  padding: 10px;
  width: 35%;
  border-radius: 2px;
  background: #C0C0C0;
  position: relative;
  min-width: 325px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  top: 0;
  right: 0;
  left: 0;
}

.divvy:hover {
  border: solid 2px darkgray;
  padding: 10px;
  width: 35%;
  border-radius: 2px;
  background: #C0C0C0;
  min-width: 325px;
  margin: 0 auto;
}

.divvy:active {
  border: solid 2px darkgray;
  padding: 10px;
  width: 35%;
  border-radius: 2px;
  background: #C0C0C0;
  -webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
  min-width: 325px;
  margin: 0 auto;
}

.inputty {
  width: 75%;
  height: 45px;
  font-size: 22px;
  font-family: 'work sans';
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="java4.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>
  <div class="center">

    <div class="optionBox" style="position: relative;">
      <button class="addtask" id="add" class="center">＋  ADD TASK</button>
      <div id="sortable" class="ul" class="center">


      </div>
    </div><br>
  </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    Specifying a width for #sortable seems to solve the issue:

    #sortable {
  width: 380px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search