Bootstrap modal pushing my jumbotron to the left in chrome but not at the edge?
I have tried some of the ways in other questions asked for bootstrap modal but I am using bootstrap 3.3.7 this should not be a problem but I don’t know why this happens every time I click the button my jumbotron shrinks Any help would be appreciated.
My html code:
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="/uploads/text.png" style="height:40px;width:40px" />
</button>
</div>
</div>
My javascript function:
function erase(){
$('#post').empty();
$('#post').html('<div class="modal fade" id="myModal1" role="dialog">'+'<div class="modal-dialog">'+'<div class="modal-content">'+
'<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal">×</button>'+
'<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>'+' </div>'+'<div class="modal-body">'+
'<div class="media "><div class="media-left"> <form action="porthome_.php" method="post" id="usrform" >'+
'<div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Write your post:</strong> <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">'+
'</div>'+
'<div class="text-right">'+
'<button type="submit" id="sub"class="btn btn-primary">POST</button>'+
'</div>'+
'</form><div class="media-body"> <a href="#"><h5 class="media-heading" style="color:#3369e8"></h5></a>'+
'</div>'+
'</div>'+
'</div>'+'<div class="modal-footer">'+
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+'</div>'+
'</div>'+'</div>'+'</div>');
}
+3
source to share
1 answer
You will find the solution here https://jsfiddle.net/qc9dgefg/2/
erase = function(){
$('#post').empty();
$('#post').html(
`<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>
</div>
<div class="modal-body">
<div class="media">
<div class="media-left">
<form action="porthome_.php" method="post" id="usrform" >
<div class="form-group">
<strong>
<span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span>
Write your post:
</strong>
<input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">
</div>
<div class="text-right">
<button type="submit" id="sub"class="btn btn-primary">POST</button>
</div>
</form>
<div class="media-body">
<a href="#"><h5 class="media-heading" style="color:#3369e8"></h5></a>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="http://via.placeholder.com/350x150" style="height:40px;width:40px">
</button>
</div>
</div>
</div>
You were missing one of the closing tags .
I added a closing div tag as well as a formatted dynamic HTML
in JavaScript
.
+1
source to share