adjust the height + width on BootBox pop up

I'm currently implementing BootBox.js on my site as the primary method of displaying dialog boxes. I have it working pretty well currently, the only thing I can't figure out how to do is to automatically adjust the height / width so that when very little content loads in the dialog box, there isn't a whole heck of a lot of white space. The same is true on the opposite side of the spectrum when it has a lot of content, that it has a height of 95% of the screen. Ideally, I'd like for it to remain at 60% of the height when it has a lot of content and autosize when it doesn't. I don't care if it's a pure css or a javascript solution, I just want it to work :)

The closest I can get it to produce my desired results is with a javascript solution I found online. The only thing is that it's not 100% reliable. here is my code for displaying it:

bootbox.dialog({
	message: result,
	buttons: {
	    success: {
	        label: btnText,
	        className: 'dlgButton dlgClose',
	        callback: function () {
	            if( btnText == 'Reply' )
	                return openDlg( msgID, replyURL + msgID, btnText );
	            else
	                return save('#frmExchange', '');
	        }
	    },
	    cancel: {
	        label: 'Cancel',
	        className: 'dlgButton dlgClose'
	    }
	}
}).find('.messgeContainer').height(getViewableHeight() / 2).css('overflow', 'auto');

Open in new window


and my function for getViewableHeight():

function getViewableHeight() {
	var myWidth = 0, myHeight = 0;
	if (typeof (window.innerWidth) == 'number') {
	    //Non-IE
	    myWidth = window.innerWidth;
	    myHeight = window.innerHeight;
	} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
	    //IE 6+ in 'standards compliant mode'
	    myWidth = document.documentElement.clientWidth;
	    myHeight = document.documentElement.clientHeight;
	} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
	    //IE 4 compatible
	    myWidth = document.body.clientWidth;
	    myHeight = document.body.clientHeight;
	}
	//   window.alert('Width = ' + myWidth);
	// window.alert('Height = ' + myHeight);

	return myHeight;
}

Open in new window


I also tried playing around with the classes "modal-sm", "modal-large", etc that comes with bootstrap (which I'm also using on my site) with no success.

Any help is greatly appreciated :)
- Josh
LVL 34
Big MontySenior Web Developer / CEO of ExchangeTree.org Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NerdsOfTechTechnology ScientistCommented:
try replacing getViewableHeight() with:
function getViewableHeight() {
	var myWidth = 0, myHeight = 0;
	if (typeof (window.innerWidth) == 'number') {
	    //Non-IE
	    myWidth = window.innerWidth;
	    myHeight = window.innerHeight;
	} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
	    //IE 6+ in 'standards compliant mode'
	    myWidth = document.documentElement.clientWidth;
	    myHeight = document.documentElement.clientHeight;
	} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
	    //IE 4 compatible
	    myWidth = document.body.clientWidth;
	    myHeight = document.body.clientHeight;
	}
   factorH = 0.6; 'max height factor
   charN = len(result); 'count characters in message
   charX = 8; 'assumed avg width of each char in pixels
   charY = 8; 'assumed avg height of each char in pixels
   charA = charX * charY; 'area of each char/grid

   'if area exceeds factored area then reduce to calculated height
   if ((myWidth * myHeight * factorH / charA) > charN){
      'calc height based on max factor
      myHeight = Math.round(myHeight*factorH);
   }else{
     'calc height based on number of char areas divided by width
     myHeight = Math.round(charN * charA / myWidth);
   }
   return myHeight;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
this works fine for now for what I need, thank you
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.