This is a migrated thread and some comments may be shown as answers.
Dynamically resize modal window
4 Answers 146 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Craig
Top achievements
Rank 1
Craig asked on 31 May 2011, 04:35 PM
I have a modal window that displays correctly.  However the content of the modal window has optional data fields for the user to enter.  This optional data is not displayed until they click a link on the page and the inputs are shown via jquery.toggle.  I would like the modal window to resize to the now visible content on the page. 

How do I get the modal window to resize to the content when a user clicks on a specific link?

Thanks.

4 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 01 Jun 2011, 09:41 AM
Hello Craig,

Thank you for contacting us.

1. If you want window to resize to the visible content you need to remove width() and height() from the window.
2. You could set different width and height to the window client-side.
Code snippet:

function resizeWindow() {
   var element = $("#Window").data("tWindow").element;
   $(element).find(".t-content").width(400).height(400);
}


All the best,
Hristo Germanov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Craig
Top achievements
Rank 1
answered on 01 Jun 2011, 04:36 PM
I do not have height or width set on the original window size

The resizeWindow function you have defined below doesn't work for me because the resize request takes place within the modal window not within the page containing the modal window.

The Modal Window calls LoadContentFrom("Create", "Telephone")
Within the Create.cshtml page there is a jquery.toggle call to show/hide optional data for the page.
When the jquery.toggle call is made I would like the Modal Window to dynamically resize to the content of the page it is loading.

Page containing Modal Window
<fieldset>
    <legend>Person</legend>
    @{ Html.Telerik().Window()
        .Name("TelephoneWindow")
        .Visible(false)
        .Title("Add Telephone")
        .Draggable(true)
        .Resizable(resizing => resizing
            .Enabled(true)
        )
        .Modal(true)
        .Buttons(b => b.Maximize().Close())
        .LoadContentFrom("Create", "Telephone", new {entityID = Model.EntityID})
        .Render();
}
    <div class="display-label">FirstName</div>
    <div class="display-field">@Model.FirstName</div>
  
    <div class="display-label">MiddleName</div>
    <div class="display-field">@Model.MiddleName</div>
  
    <div class="display-label">LastName</div>
    <div class="display-field">@Model.LastName</div>
  
    <div class="display-label">Prefix</div>
    <div class="display-field">@Model.Prefix</div>
  
    <div class="display-label">Suffix</div>
    <div class="display-field">@Model.Suffix</div>
  
    <div class="display-label">Salutation</div>
    <div class="display-field">@Model.Salutation</div>
  
    <div class="display-label">Title</div>
    <div class="display-field">@Model.Title</div>
  
    <div class="display-label">PrimaryTelephoneID</div>
    <div class="display-field">@Model.PrimaryTelephoneID</div>
  
    <div class="display-label">EntityTypeId</div>
    <div class="display-field">@Model.EntityTypeId</div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id=Model.EntityID }) |
    @Html.ActionLink("Back to List", "Index")
</p>
  
  
@{ Html.Telerik().ScriptRegistrar()
        .OnDocumentReady(@<text>
            var windowElement = $('#TelephoneWindow');
            var undoButton = $('#addTelephone');
            undoButton
                .bind('click', function(e) {
                    windowElement.data('tWindow').open();
                    undoButton.hide();
                })
                 
                  
            windowElement.bind('close', function() {
                undoButton.show();
            });
        </text>);
}
             
<span id="addTelephone" class="t-group">Add Telephone</span>

Here is the content contained within the Modal Window.  I would like the Modal Window to resize based on hiding or showing the "NotesArea" <div>
@using (Html.BeginForm())
{
      
    <br />
      
    <table class="align">
        <tr>
            <td><label>Phone Type</label></td>
            <td>
                 @Html.DropDownListFor(model=>model.Telephone.TelephoneType , new SelectList(Model.TelephoneTypes, "TelephoneTypeID", "Name", Model.TelephoneTypes[0]))
           </td>
        </tr>
  
        <tr>
            <td><label>Phone Number</label></td>
            <td>@Html.EditorFor(model => model.Telephone.Number, new { style = "width:100px;" })</td>
        </tr>
        <tr>
            <td>Extension</td>
            <td>@Html.EditorFor(model => model.Telephone.Extension, new { style = "width:100px;" })</td>
        </tr>
        <tr>
            <td><label>Primary Phone</label></td>
            <td>@Html.CheckBoxFor(model => model.IsPrimary)</td>
        </tr>
        <tr>
            <td><label id="showNotes">Add Note</label></td>
            <td></td>
        </tr>
          
    </table>
    @Html.HiddenFor(model => Model.EntityID)
      
     
    <div id="NotesArea">
        @(Html.Telerik().EditorFor(model=>model.Description)
                            .Name("Description")
                            .Tools(tools => tools
                                .Clear()
                                .Bold()
                                .Italic()
                                .Underline()
                                .Strikethrough()
                                .BackColor()
                                .FontColor()
                                .JustifyLeft()
                                .JustifyCenter()
                                .JustifyRight()
                                .InsertUnorderedList()
                                .InsertUnorderedList()
                                .CreateLink()
                                .InsertImage()
                                )
                             
                    )
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
      
}
<script type="text/javascript" >
$(document).ready(function () {
             $("#NotesArea").hide();
               
         });
  
         $('#showNotes').click(function () {
             $("#NotesArea").toggle(400); //Make the modal window resize somehow
         });
         </script>



0
Hristo Germanov
Telerik team
answered on 01 Jun 2011, 05:47 PM
Hi Craig,

You can try this workaround:

$('#showNotes').click(function () {
    var windowElement = $('#TelephoneWindow').data('tWindow').element;
 
    $(windowElement).find(".t-window-content").css("height", "auto").css("width", "auto");
     
    $("#NotesArea").toggle();
});


All the best,
Hristo Germanov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Craig
Top achievements
Rank 1
answered on 01 Jun 2011, 06:14 PM
Thanks for the reply!

I modified your code a little and here's what ended up working for me

$(".t-window-content").css("height", "auto").css("width", "auto");
$("#NotesArea").toggle(400);
Tags
Window
Asked by
Craig
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Craig
Top achievements
Rank 1
Share this question
or