Titanium Community Questions & Answer Archive

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

Trouble creating modal window on iPad

I'd like to create a model window that looks much like the Mail version – 70% of the screen width.

I'm using the code direct from the documentation, and then doctoring as an experiment. I've tried any number of widths just to see if I'm missing something. It doesn't seem to have an effect.

var window = Titanium.UI.createWindow();
window.open({
    modal:true,
    modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET,
    width: 300
});

It opens, but always as full screen (plus title bar). Appreciate any suggestions…

Best,
Nate

— asked April 18th 2010 by Nathan Ziarek
  • ipad
  • modal
1 Comment
  • Can someone from Appcelerator please comment on this??

    — commented August 3rd 2010 by Max Zabramny

9 Answers

  • For those that may be wondering about this, I'm using Titanium SDK 1.8.2, and this is working on the iPad (where the modal is not full screen).

    var myModal = Ti.UI.createWindow({
        //...
    });
    myModal.open({
        modal:true,
        modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
        modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
    });
    
    — answered March 10th 2012 by Clifton Labrum
    permalink
    0 Comments
  • Hey Nate,

    I see that Kevin Whinnery from Appcelerator has posted some sample code for an iPad app here. I haven't started iPad development yet so I can't tell you what might be going on, but hopefully looking at Kevin's sample code will help.

    Good luck!

    — answered April 27th 2010 by Dan Giulvezan
    permalink
    0 Comments
  • Hi All,

    I'm having exactly the same issue. Can't get the modal on the iPad to display as a Modal, it's showing full screen. Has anyone had the same issue and resolved this?

    Regards

    Paul

    — answered July 21st 2010 by Paul Pounder
    permalink
    5 Comments
    • Changing from 1.3.x, fullscreen:true is truly fullscreen, so make sure you don't have that on the window.

      — commented July 21st 2010 by Daniel Lim
    • There's no reference to fullscreen:true, I even tried fullscreen:false in case it was set as default. I'm using 1.3.0, is there a latest version. Maybe this was a bug in 1.3.0?

      — commented July 21st 2010 by Paul Pounder
    • I skipped 1.3.0, not sure. The latest is 1.3.3 and i've seen the fullscreen behavior changed since 1.3.2

      — commented July 21st 2010 by Daniel Lim
    • just check my ipad app built with 1.3.3, modal is working just fine.

      — commented July 21st 2010 by Daniel Lim
    • Daniel could you please explain how you got it working because I didn't get any luckier with the 1.3.3 sdk. Maybe it has to do with my code or the syntax may be slightly different.

      — commented July 26th 2010 by Luc Succes
  • I've just upgraded to 1.3.2 but still seeing the same issue, here's the crux of my code:

    var modalWindow = Ti.UI.createWindow({
        title:'Choose News Source',
        backgroundColor:'#000',
        barColor:'#000',
        url:'news_source.js'
    });
    
    addBtn.addEventListener('click',function(e)
    {
        modalWindow.open({
            modal:true,
            modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
            modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
        });
    });
    

    news_source.js just has a text box in at the moment, nothing else.

    Any thoughts?

    — answered July 22nd 2010 by Paul Pounder
    permalink
    0 Comments
  • addBtn.addEventListener('click',function(e)
    {
    var modalWindow = Ti.UI.createWindow({
        title:'Choose News Source',
        backgroundColor:'#000',
        barColor:'#000',
        url:'news_source.js'
    });
        modalWindow.open({
            modal:true,
            modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
            modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
        });
    });
    
    — answered July 22nd 2010 by Daniel Lim
    permalink
    0 Comments
  • Many thanks Daniel, but still no luck, here's the full code:

    var mainWindow = Ti.UI.createWindow();
    
    
    // WINDOWS
    var win = Ti.UI.createWindow({
        title:'First Window',
        backgroundColor:'#000',
        barColor:'#000'
        //rightNavButton: addIcon
    });
    
    var addBtn = Titanium.UI.createButton({
        backgroundImage:'images/icons/addNavBar.png',
        width:33,
        height:29
    });
    win.rightNavButton = addBtn;
    
    addBtn.addEventListener('click',function(e)
    {
    var modalWindow = Ti.UI.createWindow({
        title:'Choose News Source',
        backgroundColor:'#000',
        barColor:'#000',
        url:'news_source.js'
    });
        modalWindow.open({
            modal:true,
            modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
            modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
        });
    });
    
    // NAV GROUP
    var navGroup = Ti.UI.iPhone.createNavigationGroup({
        window:win
    });
    
    mainWindow.add(navGroup);
    mainWindow.open();
    

    Really starting to bug me now. If it makes any difference I'm using iOS3.2, xCode 3.2.3 and Titanium 1.2.1 using SDK 1.3.2

    Nothing to do with opening from a Nav Group?

    Cheers
    Paul

    — answered July 22nd 2010 by Paul Pounder
    permalink
    3 Comments
    • I've even tried using some of the code that was in one of the modal fixes in the 1.4.0 tickets (1.3.2 is 1.40RC). Still getting the same issue, thinking it maybe specific to me. Not sure how to debug this though

      — commented July 22nd 2010 by Paul Pounder
    • Sorry, Paul. Have not tried navGroup with modal and i don't have time to create a project to mimic your layout for testing. Is this your whole app.js file? may be someone with similar design can help you up.

      — commented July 22nd 2010 by Daniel Lim
    • Yes this is the whole app.js at the mo, only just started the app and already encountered this issue. I'm downloading iOS4.0.1 and going to try installing direct to my iPad too, see what that brings.

      Many thanks anyway.

      — commented July 22nd 2010 by Paul Pounder
  • Ok, I've even installed this directly onto my iPad and the Modal doesn't work. It is just showing fullscreen.

    I'm using SDK 1.3.2. iOS SDK is 3.2, iOS on iPad is 3.2.1. Titanium Developer is 1.2.1. xCode is 3.2.3

    Has anyone actually got the modal to work (like the email example in the docs) yet, and if so what setup have you got. This is really frustrating me as its my first app, and literally the first window I'm using. :-)

    Any help would be gratefully appreciated (especially from the appcelerator folks)

    Paul

    — answered July 22nd 2010 by Paul Pounder
    permalink
    1 Comment
    • Now i look at the email object you mentioned in the Doc, i see what you meant. I don't think this is possible, the modal doesn't open that way. The doc is misleading. For once, you won't have semi-transparent background in the back.

      — commented July 22nd 2010 by Daniel Lim
  • Still nothing on this? Appcelerator is really dropping the ball on iPad support. The amount of glitches and bugs basically makes it useless for developing any type of quality application.

    — answered November 28th 2010 by Bill Labus
    permalink
    0 Comments
  • any changes on this topic?

    — answered October 31st 2011 by Dustin Bensing
    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.