Ubiquitous Developers Ubiquitous Developers - 17 days ago 5
CSS Question

Modal popup content get overflow when added dynamically

I am appending HTML dynamically on div click. I am getting content properly. but when I append HTML, UI getting mess-up.

enter image description here

CodePen: http://codepen.io/anon/pen/QGpRRy

Code:

<html>
<head>
<title></title>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"></link>
<style>
#pageTitle {
display:none;
}
</style>
</head>
<body>
<div class="col-lg-12 text-center">
<h1>Policies</h1>
</div>
<div class="col-lg-12">
<div class="container" id="tiles">
<div class="col-lg-4" style="min-height:80px; background-color:ActiveCaption" id="tileTraffic">
<div class="row">
<div class="col-lg-8">
<h3>Traffic Rules</h3>
</div>
<div class="col-lg-4">
<h1>0</h1>
</div>
</div>
</div>
<div class="col-lg-4" style="min-height:80px; background-color:antiquewhite" id="tileFood">
<div class="row">
<div class="col-lg-8">
<h3>Food Policies</h3>
</div>
<div class="col-lg-4">
<h1>0</h1>
</div>
</div>
</div>
<div class="col-lg-4" style="min-height:80px; background-color:cadetblue" id="tileMedical">
<div class="row">
<div class="col-lg-8">
<h3>Medical Policies</h3>
</div>
<div class="col-lg-4">
<h1>0</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModalTraffic" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">

</div>
</div>
</div>
</div>
<div id="myModalFood" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">

</div>
</div>
</div>
</div>
<div id="myModalMedical" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">

</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#tileTraffic").click(function () {
$('#myModalTraffic').modal('show');
var html = "<div class=\"col-lg-12\"><div class=\"col-lg-4\"></div><div class=\"col-lg-8\"><p>Traffic Rules</p></div></div>";
$("#myModalTraffic .modal-body").html(html);
$("#myModalTraffic .modal-body").append(html);

});
$("#tileFood").click(function () {
$('#myModalFood').modal('show');
});
$("#tileMedical").click(function () {
$('#myModalMedical').modal('show');
});
</script>
</body>

</html>

XYZ XYZ
Answer
 var html = "<div class=\"row\"> <div class=\"col-lg-12\"><div class=\"col-lg-4\"></div><div class=\"col-lg-8\"><p>Traffic Rules</p></div></div></div>";

wrap the col inside a row.The col are floating.It causes the UI alignment issue. row clears the float by adding clear: both; in a pseudo element

http://codepen.io/anon/pen/xRqoxj Check this