Fix the size of <Pre> and make scrollable in html

Question

I used < Pre > to show my json data in Modal. But < pre > became different size according to the json size. I want to fix the < pre > height. If json is bigger, it will show by scroll.

Here is my Modal .

<div class="modal-content json-modal-body" id="full-width" ng-controller="projectdetailsController">

    <div class="modal-header modal-header-confirm">
        <h4 class="modal-title ng-binding">
            <span class="glyphicon glyphicon-indent-left"></span>{{modalOptions.headerText}}
        </h4>
    </div>

    <div class="modal-body"> 

         <pre ng-bind-html="json | prettifyFilter"></pre>

    </div>

</div>

When the json is empty. It becomes like this

How can i do this ?

Answer 1

Try This:

<style>
 div.scroll {
    width: 100px;
    height: 100px;
    overflow: scroll;
 }
</style>

See, if that solves your problem.