SharePoint 2013 App Part - Not using iFrame or flowing elements outside of iFrame

Question

I am currently developing an App Part that is attached to an Associate Directory application.

As one of the methods of finding someone, I have implemented a custom implementation of the jQuery UI Autocomplete widget (http://jqueryui.com/autocomplete/).

My problem is that according to the design for our homepage, where this app part is going to be placed, this isn't very tall.

So my issue is that when the dropdown comes down, for the autocomplete, a portion of it gets cut off. (See image below)

I know I do have some options with the styling to make it smaller and show more, but either way I would like to see if there are any more options for me.

My first thought was that I could make this into a Web Part, but then I would have to duplicate a lot of code from the application.

Please let me know if there are any ideas!

Thank you, Eric

Answer 1

Set the height in the app part elements.xml to that of the dropdown. When its focused you run a script that resizes your app part window to the height of your content.

My app part does an async call that renders an array as rows in the app part. On the last row i run below code.

        var senderId;

        var params = document.URL.split("?")[1].split("&");
        for (var i = 0; i < params.length; i = i + 1) {
            var param = params[i].split("=");
            if (param[0].toLowerCase() == "senderid")
                senderId = decodeURIComponent(param[1]);
        }
        var step = 77,
            newHeight = 0,
            arrayLength = scope.items.length,
            resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';
        for (var x = 0; x < arrayLength; x = x + 1) {
            newHeight = newHeight + step;
        }
        if (senderId) {
            resizeMessage = resizeMessage.replace("{Sender_ID}", senderId);
            resizeMessage = resizeMessage.replace("{Height}", newHeight);
            resizeMessage = resizeMessage.replace("{Width}", "100%");

            window.parent.postMessage(resizeMessage, "*");
        } 

A couple of other examples: Example 1 Example 2