Odd margin that goes across screen on bootstrap panel - html

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>