cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
3696
Views
11
Helpful
14
Replies

third party gadget height.

jdickinson
Level 5
Level 5

I am trying to change the height of a third party gadget... "my gadget".

as per instructions I added the gadgetHeight parameter, but there was no affect on the page. And my gadget is  the only item on the page. Shouldn't the web part adjust automatically to the height of the page. I think it's a bug.

/3rdpartygadget/files/EmbeddedWebApp.xml?gadgetHeight=700

1 Accepted Solution

Accepted Solutions

so actually figured it out.

All I had to do is set the container height.

this is in the CSS

body {

    background: none transparent;

    padding: 0px;

}

#displayFrame {

    width:100%;

    height:800px;

    border: 1px solid;

    border-color: green;

}

.sh{

    height:800px;

}

and added class to the body tag.

View solution in original post

14 Replies 14

dekwan
Cisco Employee
Cisco Employee

The gadgetHeight parameter only works for the LiveData gadgets. For the EmbeddedWebApp gadget, you have to change the height in the EmbeddedWebApp.js file itself (_handleTabVisible).

So I tried the height feature setting and I get this...

heightThing.PNG

The following is the code:

_handleTabVisible = function () {

  _clientLogger.log("_handleTabVisible()");

  if ($("#displayOut").html() == "")

  {

  var html = '<iframe src="' + _urlToLoad + '" id="displayFrame"  width="100%" height="700" ></iframe>';

  //set the html document's agentout element to the html we want to render

  $("#displayOut").html(html);

  _clientLogger.log("Setting #displayOut.html to: " + $("#displayOut").html());

  // automatically adjust the height of the gadget to show the html

  gadgets.window.adjustHeight(700); }

  _clientLogger.log("Starting the _checkForTabNotVisible() checker...");

  window.setTimeout(_checkForTabNotVisible, 100);

  };

You shouldn't specify the height in the adjustHeight, so it should be gadgets.window.adjustHeight();

heightT2.PNG

Trying to make this take more of the screen, but I just get this.

var html = '<iframe src="' + _urlToLoad + '" id="displayFrame"  width="100%" height="800px" ></iframe>';

  //set the html document's agentout element to the html we want to render

  $("#displayOut").html(html);

  _clientLogger.log("Setting #displayOut.html to: " + $("#displayOut").html());

  // automatically adjust the height of the gadget to show the html

  gadgets.window.adjustHeight(); }

Do you get this problem if you revert back to the original URL? When using the provided sample code and only modifying the height attribute, it works fine on my 10.6 system.

Thanx,

Denise

I don't quite understand what you mean by revert back.

I am using the embedded gadget sampler control with a modification of height.

Attached are two screen shots, one of the app embedded.

The other of the app NOT embedded.

if ($("#displayOut").html() == "")

  {

  var html = '<iframe src="' + _urlToLoad + '" id="displayFrame"  width="100%" height="800px" ></iframe>';

the app below is embedded. Notice the scroll bar to the right. I didn't put that there.setHeightSeemsWrong.PNGWhatAppShouldLookLikeImbeddded.PNGthe app

above is NOT embedded.

so actually figured it out.

All I had to do is set the container height.

this is in the CSS

body {

    background: none transparent;

    padding: 0px;

}

#displayFrame {

    width:100%;

    height:800px;

    border: 1px solid;

    border-color: green;

}

.sh{

    height:800px;

}

and added class to the body tag.

This had me banging my head against the wall for hours.

It's important that you add this line to your XML file or nothing you do will change the height:

<Require feature="dynamic-height" />

Here's an example:

<Module>

    <ModulePrefs title="AgentWebMessage"

        description="AgentWebMessageGadget">

<Require feature="dynamic-height" />

        <Require feature="settitle" />

        <Require feature="pubsub-2" />

        <Require feature="setprefs" />

        <Require feature="loadingindicator">

            <Param name="manual-dismiss">false</Param>

            <Param name="loading-timeout">15</Param>

        </Require>

    </ModulePrefs>

Hope this helps!

Hi Joe,

Thank you for sharing your lessons learned with the community!

Thanx,

Denise

Hi All,

 

I trying to add a permalink to Finesse using the CUIC Sample gadget.

My height doesn't seem to be changing. Can you please clarify what you mean when you mention "and added class to the body tag."?

 

Here is a copy of my CUIC.css

------------

/**
 * Default attributes for gadget body.
 */
body {
    background: none transparent;
    padding: 0px;
}
#frame1 {
    width:100%;
    height:800px;
}
#agentout {
    margin:4x;
}

------------

Hi,

For the CUIC sample gadget, the code in the JS is: '<iframe src="' + permalink + ' " id="frame1" width="900" height="300"></iframe>'

You should be able to change the height directly in the JS. Also, make sure the gadget is not loading from cache after you make the change, you can use the &nocache option.

Thanx,
Denise

i have just started learning the basics of java scripting and jquery, i created one simple html content along with script tags, which basically creates a hyperlink of a website and when u click on it it opens up the website in the gadget. Below is the xml file

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Sample Gadget"
description="Sample Gadget"
thumbnail="http://localhost:8082/">
<Require feature="dynamic-height" />
<Require feature="settitle" />
<Require feature="pubsub-2" />
<Require feature="setprefs" />
<Require feature="loadingindicator">
<Param name="manual-dismiss">false</Param>
<Param name="loading-timeout">10</Param>
</Require>
</ModulePrefs>

<Content type="html">

<![CDATA[
<!DOCTYPE html>
<!-- Styling -->
<body class="claro">
<!-- Sample Gadget -->
<script type="text/javascript">
var a = prompt('What is your name?', '');
document.write("Welcome " + a);
</script>
<p><a href="https://www.xxx.com/">Broadridge</a></p>
</body>
]]>
</Content>
</Module>

 

But the website height is not auto adjusting, i have tried with and without CSS sheet.site.JPG

ok, it worked after i added below paramter under moduleprefs tag

 

description="Sample Gadget" width="780" height="900"

Getting Started

Find answers to your questions by entering keywords or phrases in the Search bar above. New here? Use these resources to familiarize yourself with the community: