Issue with bootstrap 3 buttons not having space in between when added to page after page load
I have a problem where I have a simple test page with 6 buttons. In the body, the pages are declared and after the page is loaded, 3 are added using jquery. The 3 added with jquery don't have a gap between the 3 that were declared on the page before it was loaded.
Here is a fiddle demonstrating the problem: http://jsfiddle.net/codeowl/c5QRS/
Here is the code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bootstrap Test Page</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</script>
</head>
<body>
<div>
<div>Buttons In Page</div>
<button type="button" class="btn btn-default">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<div id="DynamicButtonContainer">
<div>Buttons Dynamically Added</div>
</div>
<script>
$(document).ready(function() {
var eDynamicButtonContainer = $('#DynamicButtonContainer');
eDynamicButtonContainer.append($('<button type="button" class="btn btn-default">Add</button>' +
'<button type="button" class="btn btn-default">Edit</button>' +
'<button type="button" class="btn btn-default">Delete</button>'));
});
</script>
</body>
</html>
How can I solve this problem and get the added buttons to display at the same spacing as those declared on the page before loading?
Thank you for your time,
Hello,
Scott
source to share
Buttons in your markup have spaces between them in the markup (newline and spaces / tabs for indentation), but the buttons in the markup you add don't, so they have no space between them when rendered. If you add in \n
between, those are spaces and whitespace. For example: Updated violin
$(document).ready(function() {
var eDynamicButtonContainer = $('#DynamicButtonContainer');
eDynamicButtonContainer.append(
$('<button type="button" class="btn btn-default">Add</button>\n' +
// Note -----------------------------------------------------^^
'<button type="button" class="btn btn-default">Edit</button>\n' +
// And -------------------------------------------------------^^
'<button type="button" class="btn btn-default">Delete</button>'));
});
source to share