4 ways to set the heigth of your open social gadget

You have a couple of options for setting the height of your gadget. I'll run through four methods that seem to work. First two words of caution, if you are using the eclipse plugin to develop on, you won't see the second method described here working. I don't know why, but the code works in iGoogle, so it must be something to do with the eclipse OSDE env. The second word of warning is that the syntax hilighter I'm using on this post chokes on CDATA tags, so the CDATA tags in the code examples are wrong. I've posted links to the sample gadgets at the end of this post, and you can get the samples there if you like. With those caveats, let us press on:

1. Don't do anything

sample 1 gadget code

The basic code below gives no specification for height. The container will default to 200px.

 


                title="t1"
            author_email="ian.mulvany@gmail.com">
        
    
    
    
    < ![CDATA[


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    ]]>
    

All of the code after the content div in these examples is the same, so I'm omitting in the rest of the examples below.

2. Hardcode the height.

sample 2 gadget code

Pretty simple, tell the container exactly how big you content is going to be. For this example I knew that 400px was not going to be bog enough for the content that I wanted to display, so I added a scrollbar, easy!

 


       author_email="ian.mulvany@gmail.com" 
   height="400" 
   scrolling="true">
        
    
    

    < ![CDATA[    

3. Use the OpenSocial dynamic-height library

sample 3 gadget code

Require the dynamic-height library, and then create a javascript function in your content section that calls the api. I've added in a handler that works on the window onload event, but this is probably not the best use of this method. You probably want to be doing it in response to some other event that will dynamically be changing the content of the gadget.

 


                title="t3"
            author_email="ian.mulvany@gmail.com">
        
        
    
    

    < ![CDATA[
    
        

4. Use the OpenSocial-jquery library

sample 4 gadget code

Almost exactly the same as method 3, except we use the opensocial-jquery library. If you are doing more with javascript this library seems to offer the simplicity of the jquery syntax, so for people who prefer this dialect of javascript it may be a very good option.

 


                title="t4"
            author_email="ian.mulvany@gmail.com">
        
   
    
    
    
    < ![CDATA[