My Google Gadget goes partially out of the screen

Question

When i add this as Gadget to google calendar ,it partially goes out of the screen...How should i correct such that the gadget will appear with in the screen...

Here is a code where it creates a gadget asking for username and password and login button..

I just want to know the procedure too make the gadget to appear with in the screen

enter code here
<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="ABC Google Calendar Gadget" width="180" author="abc" author_email="abcgmail.com" description="My First Test">
<Require feature="dynamic-height"/>
 <Require feature="google.calendar-0.5"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
<html style="overflow: hidden;">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
//.login {
//  display: block;
//}
//.event {
//  display: none;
/}
</style>

</head>
<body class="loc-en ff ff3">

<script>

var _message = 'This is My first Gadget!';
function validateForm(){
alert("Hello");
$('.login').hide();
$('.event').show();
}
function createEventfun(){
alert("create event");
var eventData = {
    title: 'NewYear',
    details: 'Hi all',
    location: 'My room',
    allDay: true,
    startTime: {year: 2013, month: 04, date: 21},
    endTime: {year: 2013, month: 04, date: 22},
    attendees: [
      {email: 'nirupama.ninusah@gmail.com'}
    ],
    rrule: 'RRULE:FREQ=YEARLY'
  };
google.calendar.composeEvent(eventData);
}  

function load()
{
alert("Page is loaded");
}

function changeWidth(){
        var e1 = document.getElementById("gadgetcell");
        e1.style.width = 180;
        alert("Page is loaded and width of gadgetcell is modified to 180");
    }

</script>

<div class="login" align="left">
<table border="1" height="200" width="100%">
<tr>
<td>
<image src="http://abc.com/Portals/78096/images/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="left">
<table border="0">
<tr>
<td>Userid</td>
<td><input type="text" name="userid" size=10/><br></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" size=10/><br></td>
</tr>
<tr>
<td>VidyoURL</td>
<td><input type="text" name="url" size=10/><br></td>
</tr>
<tr>
<td><button onClick="validateForm()" style="background-color:red;color:white">LOGIN</button></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="event" style="width: 180px;">
<table border="1">
<tr>
<td>
<image src="http://abc.com/Portals/78096/image/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="center">
<table border="0" height="200" width="100%">
<tr>
<span>User Successfully Aunthenticated</span>
</tr>&nbsp;
<tr>
<button onclick="createEventfun()" style="background-color:red;color:white">CREATE VIDYO EVENT</button>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
 ]]></Content>
</Module>

score 1 · Answer 1 · answered May 07 '13 at 15:44

Look at Managing Gadget Height:

- A <Require feature="dynamic-height"/> tag (under <ModulePrefs>) to tell the 
  gadget to load the dynamic-height library.
- A call to the JavaScript function gadgets.window.adjustHeight() whenever there 
  is a change in content, or another event occurs that requires the gadget to 
  resize itself.

I added this script to all views and it works:

<script type="text/javascript" charset="utf-8">
    function resize(){
        gadgets.window.adjustHeight();
    }
    window.onload=resize;
</script>

Don't forget about "Required feature" tag

My Google Gadget goes partially out of the screen

1 Answers1