How can I resize a web part to be the size of a div it is sitting in

Question

I am trying to put some final touches on our main portal page. We are using a wiki page with a 2 column text layout. The left column is 75% of the page and the right column is 25%.

In the right column, I have a div that holds our social widget. There are 3 tabs you can click through. One for Twitter, one for Facebook, and one for internal blog entries. The Twitter/Facebook feeds are being pulled in by a Content Editor web part. There are no size restrictions on the web part, but on the actual widget itself. The Blog web part is a 3rd party web part. I've tried to put size restrictions on the web part, but it does turn out the way I want it.

Realistically, I'd like to have the right div that holds the social widget to dynamically resize based on the browser window. Is that possible?

The same with the left column. I have a table in there with different sized columns and rows. I can get the width of the columns to resize, but the height is hard coded. I want it to be dynamic.

Answer 1

You'll have to use some JavaScript to re-adjust the height, or adjust some of the core CSS to cater for more adjustable/responsive heights (e.g. min-height rather the out-of-the-box fixed heights for Webparts).

As you're applying some asynchronous content onto your webpage, the <div> will not be able to correctly guess the height it requires to fit all the content; especially as they sometimes come through as <iframes>.

At the bottom of the master file, you can apply a small script to run at the end of page load (with jQuery), this below will resize a 'Codeblock Webpart':

jQuery(document).ready(function() {
     var $outerCodeblock = jQuery( '.ms-rte-embedcode.ms-rte-embedwp' );
     if ( $outerCodeblock.length ) {
         // +50 for padding
         $outerCodeblock.css( 'height', $outerCodeblock.find('iframe').height() + 50 );
     }
});

The '.ms-rte-embedcode.ms-rte-embedwp' is just for example, you'll need to use your Browser's inspector tool to correctly find the relevant 'container' your Webpart sits in, example: