CODEWITHSUNDEEP
javascriptajaxasp.net-mvctwitter-bootstrapbootstrap-modal
nomeal
nomeal

Reputation: 88

Fit PartialView to Bootstrap Modal (MVC)

I'm displaying a MVC Partial View inside a Bootstrap Modal by clicking a button. My setup is like this:

Modal

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body" id="Preview">
                @*PartialView*@
            </div>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
    function Open() {
        $.ajax({
            type: "Get",
            url: '@Url.Action("PartialViewTitle", "Controller")',
            data: {},
            success: function (data) {
                $('#Preview').html(data);
                $('#myModal').modal('show');
            }
        });
    }
</script>

In my Controller I have defined a method PartialViewTitle() which returns the Partial View. I have a button, where onclick= links to the Open() function.

The problem is that the content of my partial View is displayed on the left side of the modal and on the right is blank space. I would like to have the size of my modal adapted to its content and the content to be centered. What is the best way to do this?

Thank you in advance!

Upvotes: 1

Views: 625

Answers (3)

Inayat Hussain
Inayat Hussain

Reputation: 3

Try using $('#Preview').append(data); instead of $('#Preview').html(data);

Upvotes: 0

B.S.
B.S.

Reputation: 678

To get the content centered you just have to add align-self-center as follow:

<div class="modal-body align-self-center" id="Preview">

To adapt size, you can use css display: inline-block; please take a look to the following article:

Bootstrap Modal Dynamic Width

Upvotes: 1

Prajakta.S
Prajakta.S

Reputation: 101

In your .cshtml view use

<div id='myModal' class='modal hide fade in' data-url='@Url.Action("PartialViewTitle","Controller")'>
   <div id='ModalContainer'>
   </div>
</div>

Javascript

    <script type="text/javascript">
        function Open() {
            var url = $('#myModal').data('url');             
            $.get(url, function(data) {
            $('#ModalContainer').html(data);

            $('#myModal').modal('show');
        });
        }
    </script>

If it doesn't work then need to add styles.

Upvotes: 0

Related Questions