Adding ''overlay" View to main windows - Width and Height ignored (Android)

[natefollmer]

TA build: 3.4.1 Android: 4.4.4 NappDrawer: 1.1.3

I'm trying to create an 'overlay' view (Like a pop up window) on top of my NappDrawer. When I click a row in my left table view, it opens up a new view that has a Facebook log in button. The view that pops up is setting it's width based on it's content (Like it's on auto) regardless of what I set the width to when I define the view.

Code (The NappDrawer is basically the example file under Android):

This is my app.js file

var leftMenuView = Ti.UI.createView({
    backgroundColor:'white',
    color:'black',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL
});

var centerView = Ti.UI.createView({
    backgroundColor:'white',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL
});

var rightMenuView = Ti.UI.createView({
    backgroundColor:'white',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL
});

leftMenuView.add(settings.leftTableView); //This is just a js file that creates a tableview of settings. Rows are created from a JSON file
rightMenuView.add(postActions.rightTableView); //This is just a js file that creates a tableview of settings. Rows are created from a JSON file

// Action Bar - FAKE example
var actionBar = Ti.UI.createView({
    top:0,
    height:"50dp",
    backgroundColor:"#1B5E20"
});
var leftToolbarBtn = Ti.UI.createButton({
    title:"Settings",
    left: "6dp",
    backgroundColor:"transparent",
    color: "#FFF", font:{fontSize:'12dp'}
});
leftToolbarBtn.addEventListener("click", function(){
    drawer.toggleLeftWindow();
});
var rightToolbarBtn = Ti.UI.createButton({
    title:"Post Actions",
    right: "6dp",
    backgroundColor:"transparent",
    color: "#FFF", font:{fontSize:'12dp'}
});
rightToolbarBtn.addEventListener("click", function(){
    drawer.toggleRightWindow();
});
var centerButton = Ti.UI.createButton({
    backgroundColor:"transparent",
    font:{
        fontSize:"16dp",
        fontWeight:"bold"
    },
    color: "#FFF"
});
actionBar.add(leftToolbarBtn);
actionBar.add(rightToolbarBtn);
actionBar.add(centerButton);
centerView.add(actionBar);

// create interface

centerView.add(post.postView); //This is just a js file that creates a view to fill the center window of the NappDrawer


// CREATE THE MODULE
var NappDrawerModule = require('dk.napp.drawer');
var drawer = NappDrawerModule.createDrawer({
    fullscreen:false, 
    leftWindow: leftMenuView,
    centerWindow: centerView,
    rightWindow: rightMenuView,
    fading: 0.5, // 0-1
    parallaxAmount: 0.5, //0-1
    shadowWidth:"5dp", 
    leftDrawerWidth: "200dp",
    rightDrawerWidth: "200dp",
    animationMode: NappDrawerModule.ANIMATION_ZOOM,
    closeDrawerGestureMode: NappDrawerModule.CLOSE_MODE_MARGIN,
    openDrawerGestureMode: NappDrawerModule.OPEN_MODE_ALL,
    orientationModes: [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT]
});


drawer.addEventListener("didChangeOffset", function(e){
    //Ti.API.info("didChangeOffset: " + e.offset);
});

drawer.addEventListener("windowDidOpen", function(e){
    if(e.window == NappDrawerModule.LEFT_WINDOW) {
        Ti.API.info("windowDidOpen - LEFT DRAWER");
    } else if (e.window == NappDrawerModule.RIGHT_WINDOW) {
        Ti.API.info("windowDidOpen - RIGHT DRAWER");
    }
});
drawer.addEventListener("windowDidClose", function(e){
    Ti.API.info("windowDidClose");
});


// Action Bar - REAL example
drawer.addEventListener('open', onNavDrawerWinOpen);
function onNavDrawerWinOpen(evt) {
    this.removeEventListener('open', onNavDrawerWinOpen);

    if(this.getActivity()) {
        // need to explicitly use getXYZ methods
        var actionBar = this.getActivity().getActionBar();

        if (actionBar) {
            // Now we can do stuff to the actionbar  
            actionBar.setTitle('TEST');

            // show an angle bracket next to the home icon,
            // indicating to users that the home icon is tappable
            actionBar.setDisplayHomeAsUp(true);

            // toggle the left window when the home icon is selected
            actionBar.setOnHomeIconItemSelected(function() {
                drawer.toggleLeftWindow();
           });
        }
    }    
}

// lets open it
drawer.open();

Now here is where I make the overlay view (with some FB code also):

    var facebook;
    var platformName = Titanium.Platform.osname;

    facebook = require('facebook');
    facebook.appid = 'xxxxxxxxxxxxxx'; //actual number is in the code 

var facebookAcct = function(parent) {

    var fbview = Ti.UI.createView({
          height:Ti.UI.FILL, //No matter what I put here, it's always as tall/wide as it's contents
          width:Ti.UI.FILL,  //No matter what I put here, it's always as tall/wide as it's contents
          backgroundColor:"#fff",
          opacity:0
    });

    var moveIn = Ti.UI.createAnimation();
    moveIn.duration=200;
    moveIn.opacity = 1;

            if(!facebook.loggedIn)
        {

           facebook.forceDialogAuth = false;
           facebook.permissions =  ['publish_actions, manage_pages'];

       }

    // Login Status

    var label = Ti.UI.createLabel({
        text:'Logged In = ' + facebook.loggedIn,
        font:{fontSize:20},
        height:'auto',
        top:10,
        textAlign:'center', color:'black'
    });

    fbview.add(label);

    if (facebook.loggedIn)
    {
        label.text = 'You are logged into Facebook as '+ Ti.App.Properties.getString('profileName')+'. Click below to log out.';
    }
    else if (!facebook.loggedIn)
    {
        label.text = 'You are not logged into Facebook. Click below to start the login process.';
    }

    function updateLoginStatus() {

        if (!facebook.loggedIn)
        {
                    Ti.App.Properties.removeProperty('pageAccessToken');
                    Ti.App.Properties.removeProperty('pageActive');
                    Ti.App.Properties.removeProperty('pageName');
                    Ti.App.Properties.removeProperty('pageID');
                    Ti.App.Properties.removeProperty('pagePhoto');
                    label.text = 'You are not logged into Facebook. Click below to start the login process.';
        }
        else
        {
        var xhr = Titanium.Network.createHTTPClient();
        xhr.onload = function() {
           var Response = this.responseText;
           var ResponseJSON = JSON.parse(Response);

           Ti.App.Properties.setString('profileName', ResponseJSON.name);  
           label.text = 'You are logged into Facebook as '+ Ti.App.Properties.getString('profileName')+'. Click below to log out.'; 
        };
        xhr.open("GET","https://graph.facebook.com/v2.1/me?fields=name&access_token=" +facebook.getAccessToken());
        xhr.send();

    }
    }

    // capture
    facebook.addEventListener('login', updateLoginStatus);
    facebook.addEventListener('logout', updateLoginStatus);

    //
    // Login Button
    //
    fbview.add(facebook.createLoginButton({
        style : facebook.BUTTON_STYLE_WIDE,
        bottom : '50%' //This will actually move the window height up and down if I use %, but any other form of measurement will NOT change the window.
    }));

    fbview.animate(moveIn);
    parent.add(fbview); //parent is the NappDrawer passed into this function
   // return fbview;
};

exports.facebookAcct = facebookAcct;

Here is where I call the above file

 switch(e.index){
        case 0:

            facebookAcct.facebookAcct(drawer);
           //drawer.toggleLeftWindow(); //animate back to center
            break;

Pretty standard stuff... Not sure what's going on. I did try just adding the view to the leftWindow, which works, but then the webView never shows up when you click the Facebook Log in button.