Question

I have created a bootply with the code to better explain the issue:

https://www.bootply.com/TvGcNno4qx

If you add a note give it a title and content then click add, then inspect you will see that the div with classes, note-panel dragme and 1 other it has a margin that goes across the screen in full. I can't seem to get rid of it. Here is some of the code I have tried:

.note-panel{
        width: 300px;
        margin-bottom: 0px;
        margin-top: 0px;
        margin-left:0px;
        margin-right: 0px;
    }
    .panel{
        margin-bottom: 0px;
        margin-top: 0px;
        margin-left:0px;
        margin-right: 0px;
    }
    .ui-draggable{
        margin-bottom: 0px;
        margin-top: 0px;
        margin-left:0px;
        margin-right: 0px;
    }

And this is the div that is generated:

<div class='note-panel dragme' id='"+noteno+"'>
    <div class='panel panel-primary'>
        <div class='panel-heading'>
            <h3 class='panel-title'>"+title+"</h3>
        </div>
        <div class='panel-body'>"+content+"</div>
    </div>
</div>

When the page loads, I often have 2 notes side by side, but because of the margin issue they load below each other instead of side by side.

Any help much appreciated!

Answer 1

I have tried to recreate the functionality here. Dragging seems to work fine and the panels are next to each other.

#noteBoardInt,
header.first-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.first-row .h1 {
  margin: 0;
  margin-right: 2em;
  padding: 0;
}

#addNewNote {
  display: none;
}

.note-panel {
  min-width: 300px;
  max-width: 300px;
}

.note-panel:not(:first-child) {
  margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="first-row">
  <h1 class="h1">Your Notes</h1>
  <a class="btn btn-primary" id="addNote">Add A Note</a>
</header>
<div id="noteBoard">
  <div id="noteBoardInt">
  </div>
</div>

<!-- Modal -->
<div id="addNewNote" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Add A new note</h4>
      </div>
      <div class="modal-body">
        <div class="row" style="margin-bottom: 15px;">
          <div class="col-md-4">
            <p>Title:</p>
          </div>
          <div class="col-md-8">
            <input id="title" class="form-control">
          </div>
        </div>
        <div class="row" style="margin-bottom: 15px;">
          <div class="col-md-4">
            <p>Content:</p>
          </div>
          <div class="col-md-8">
            <textarea id="noteContent" class="form-control"></textarea>
          </div>
        </div>
        <div class="row" style="margin-bottom: 15px;">
          <div class="col-md-12">
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title" id="panel-title"></h3>
              </div>
              <div class="panel-body" id="panel-body">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-2 col-md-offset-10">
            <button class="form-control btn btn-success" id="addPanel">Add</button>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="//code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>







<!-- JavaScript jQuery code from Bootply.com editor  -->

<script type="text/javascript">
  var userNoteNo = 0;
  var userName = "lsmith";


  $(document).ready(function() {
    var response = "";
    //Put the notes on the page
    $.ajax({
      url: "/myaccount/sw/note-ajax.php?command=load&username=" + userName,
      type: "GET",
      async: false,
      success: function(data) {
        var response = JSON.parse(data);
        console.log(response);

        for (var i in response) {
          returnCardLoad(response[i].title, response[i].content, response[i].x, response[i].y, response[i].noteno);

          userNoteNo++;
        }
      }
    });
  });

  $("#addNote").on("click", function() {
    $("#addNewNote").modal("show");
  });

  $("#title").on("blur", function() {
    $("#panel-title").html($("#title").val());
  });

  $("#noteContent").on("blur", function() {
    $("#panel-body").html($("#noteContent").val());
  });

  $("#addPanel").on("click", function() {
    var html = "";
    var title = $("#title").val();
    var content = $("#noteContent").val();
    html = "<div class='note-panel dragme' id='" + userNoteNo + "'><div class='panel panel-primary'><div class='panel-heading'><h3 class='panel-title'>" + title + "</h3></div><div class='panel-body'>" + content + "</div></div></div>";
    $("#noteBoardInt").append(html);

    //empty the inputs
    $("#title").val('');
    $("#noteContent").val('');
    $("#panel-title").html('');
    $("#panel-body").html('');

    $("#addNewNote").modal("hide");
    addDrag();
    addToDatabase(userName, title, content, userNoteNo);

    //LAST THING
    userNoteNo++;
    html = "";
  });

  function returnCardLoad(title, content, x, y, noteno) {
    var html1 = "";
    html1 = "<div class='note-panel dragme' id='" + noteno + "'><div class='panel panel-primary'><div class='panel-heading'><h3 class='panel-title'>" + title + "</h3></div><div class='panel-body'>" + content + "</div></div></div>";
    $("#noteBoardInt").append(html1);

    $("#" + noteno).css("top", y + "px").css("left", x + "px");
    addDrag();
  }

  function addDrag() {
    $(".dragme").draggable({
      scroll: false,
      containment: "#noteBoardInt",
      handle: ".panel-heading",
      stop: function(event, ui) {
        var noteBox = $(this)
        var position = noteBox.position();
        var leftPos = position.left;
        var topPos = position.top;

        var noteNo = noteBox.attr("id");
        updateDatabase(leftPos, topPos, userName, noteNo);
      }
    });
  }

  function addToDatabase(userName, title, content, noteNo) {
    //Do the ajax to add record of the item to the database
    var x = 0;
    var y = 0;

    $.ajax({
      url: "/myaccount/sw/note-ajax.php?command=add&username=" + userName + "&title=" + title + "&content=" + content + "&x=" + x + "&y=" + y + "&usernoteno=" + noteNo + "",
      success: function() {}
    });

  }

  function updateDatabase(x, y, username, noteno) {
    $.ajax({
      url: "/myaccount/sw/note-ajax.php?command=edit&username=" + userName + "&x=" + x + "&y=" + y + "&usernoteno=" + noteno + "",
      success: function() {}
    });
  }
</script>

Odd margin that goes across screen on bootstrap panel

1 个答案: