CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hardik Gondalia
Hardik Gondalia

Reputation: 3717

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>

Upvotes: 0

Views: 53

Answers (2)

Goombah
Goombah

Reputation: 2855

Alternatively, you can target the columns within the modal and cause them to not float.

.modal-body
{
  text-align: center;
}

.modal-body div[class^="col-lg-"] 
{
  float: none;
  width: 100%;
}

Codepen

Upvotes: 1

XYZ
XYZ

Reputation: 4480

 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

Upvotes: 1

Related Questions