Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Modal Window Smaller than Full Screen

In the image example for Modal windows (here, Window API Reference) The modal window is shown smaller than the full size of the screen. No matter what, trying to recreate that doesn't seem to work. The modal window always appears as the full width and height of the available screen.

Example:

modalwindow = Ti.UI.createWindow({
        width: 400,
        height: 500,
        top: 40,
        left: 40,
        borderRadius: 10,
        title: 'Modal Window',
        rightNavButton: cancelButton,
        orientationModes: [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT]
});

modalwindow.open({
    modal: true,
    modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
    modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
});

In this instance, it seems that the height, width, top, left, and border radius are completely ignored. The window opens with the correct transition, but fills the screen entirely instead of taking up only its defined space.

How can we accomplish making modal windows work like the example image?

— asked July 24th 2010 by Paul Armstrong
  • ipad
  • modal
  • window
3 Comments

  • Any luck yet? I'm having the same issue. The KS example works great but won't work in my app…fullscreen no matter what.

    — commented July 28th 2010 by Kelly Redd

  • Still no luck for me either.

    — commented February 9th 2011 by Nam Nguyen

  • Thanks! Your code sammple works for me (on the iPad).
    I didn't know I have to set top and left to make it work!

    — commented June 17th 2011 by Felix Krause

6 Answers

  • I solved this by making a regular full screen transparent window, which only contains an opaque view with the desired content. This window, even if it is transparent won't allow the manipulation of the elements underneath it, so it's for all purposes a modal window.

        var win = Ti.UI.createWindow({
        backgroundColor : '#40000000'
    });

    var win_height = Ti.Platform.displayCaps.platformHeight * 0.35;
    var win_width = Ti.Platform.displayCaps.platformWidth * .7;

    var view = Ti.UI.createView({
        backgroundColor : 'black',
        borderColor : '#A5A5A5',
        borderRadius : 40,
        borderWidth : 2,
        width : win_width,
        height : win_height
    });

    //rest of the code follows...
    — answered August 25th 2011 by Joao Silva
    permalink
    1 Comment

    • @Joao This works great… thank you for sharing!

      — commented January 24th 2013 by Daniel Petkovski

  • I don't have a solution for this issue (it might be a Titanium bug) but a workaround is to just open the modal window without making it a modal.

    Just define it as you have above, but just call modalWindow.open(); without any of the other modal-specific stuff.

    — answered August 17th 2010 by Clifton Labrum
    permalink
    1 Comment

    • This doesn't work for me either. Titanium continues to ignore width and height settings for the window.

      — commented April 25th 2011 by Eric Rushing

  • Set modalStyle to "Ti.UI.iPhone.MODAL_PRESENTATION_PAGESHEET" makes "width" and "height" parameter work.

    myModalWin.open({
        modal:true,
        modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
        modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_PAGESHEET
    });
    — answered February 23rd 2011 by thomas weber
    permalink
    5 Comments

    • Doesn't work here I'm afraid. Running on an HTC Incredible. No matter what I try the "modal" window is full screen.

      — commented April 25th 2011 by Eric Rushing

    • yep, still not working for me either - iPad, OSX, 1.7.1

      — commented June 22nd 2011 by Kelly Redd

    • ok, taking it back mere minutes later - FORMSHEET works for me, PAGESHEET does not. werd up.

      — commented June 22nd 2011 by Kelly Redd

    • Switched to FORMSHEET and it's actually better. I have the close button in the toolbar. The full screen modal looked fine except sometimes the bar that displays the carrier, etc.. was hiding, and stayed like that even after closing the modal. Even weirder.

      — commented June 22nd 2011 by Dragos Stancu

    • FORMSHEET allows you to re-size the width and height properties or not Kelly?

      — commented July 28th 2011 by david brewer

  • I have the same Problem. Setting the height in Modal windows doesn't work.

    — answered October 9th 2010 by Stefan Schleich
    permalink
    0 Comments

  • I had the same problem, but your code sample worked for me.

    — answered May 9th 2011 by Dennis van den Ende
    permalink
    0 Comments

  • Create the modal with backgroundColor like 'rgba(r,g,b,a)' and then add a view with left and right values around 50.

    — answered June 9th 2011 by Dragos Stancu
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.