Solved

My app not getting fit to browser scrollbar

Posted on 2011-02-19
16
830 Views
Last Modified: 2012-05-11
Hi Experts,

I am not able to fit my flex application to browser's scroll bar.My .swf is embedded in .jsp file. I made all widths and heights to 100%. I am using Container inside Canvas, made Canvas width and height to 100%.Could you please let me know what i need to do more to fit my app to browser scrollber?

In .jsp:
-------
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title><%= TRACE_TITLE %></title>
        <style type="text/css" media="screen">
                html, body      { height:100%; }
                body { margin:0; padding:0; overflow:auto; text-align:center; background-color: #ffffff; }
                #flashContent { display:none; }
        </style>
        <script type="text/javascript" src="/flexapp/E2EView/swfobject.js"></script>

        <script type="text/javascript">
            var swfVersionStr = "0";
            var xiSwfUrlStr = "";
            var flashvars = {};
            flashvars.attuid = "<%= attuid %>";
            flashvars.strData = "<%= strData %>";
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
                params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "SampleView";
            attributes.name = "SampleView";
            attributes.align = "middle";
            swfobject.embedSWF(
                "/flex/EView/HelpViewdesign.swf ", "flashContent",
                "100%", "100%",
....
In Myapp.mxml
---------------
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 xmlns:comp="com.att.ntscp.view.component.*" 
 skinClass="com.view.style.ApplicationContainerSkin"
 width="100%" height="100%" creationComplete="onCreationComplete();"
xmlns:scpt="com.view.script.*"> 
....
....
<mx:Canvas id="vb" width="100%" height="100%"> 	<scpt:CmdHelpContainer id="cmdContainer"     width="100%" height="100%"/>
</mx:Canvas>
</s:Application>

Open in new window

IMGSShot.bmp
0
Comment
Question by:Alpita
  • 9
  • 7
16 Comments
 
LVL 17

Expert Comment

by:deepanjandas
ID: 34935941
Set the minimum width and height of your application in the swfobject params instead of 100%.

Warm Regards
Deepanjan Das
0
 

Author Comment

by:Alpita
ID: 34939383
Hi Expert,

I replaced in my jsp like this,

<script type="text/javascript">
            var swfVersionStr = "0";
            var xiSwfUrlStr = "";
            var flashvars = {};
            flashvars.attuid = "<%= attuid %>";
            flashvars.strData = "<%= strData %>";
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
                params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "SampleView";
            attributes.name = "SampleView";
            attributes.align = "middle";
            swfobject.embedSWF(
                "/flex/EView/HelpViewdesign.swf ", "flashContent",
                "700", "700",
....

still my app is not fitting to browser scroll bar.
0
 

Author Comment

by:Alpita
ID: 34939922
Hi Expert,
  I made changes like this,

In .jsp
------
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title><%= TRACE_TITLE %></title>
        <style type="text/css" media="screen">
                html, body      { height:700; }
                body { margin:0; padding:0; overflow:auto; text-align:center; background-color: #ffffff; }
                #flashContent { display:none; }
        </style>
        <script type="text/javascript" src="/flexapp/E2EView/swfobject.js"></script>
<script type="text/javascript">
            var swfVersionStr = "0";
            var xiSwfUrlStr = "";
            var flashvars = {};
            flashvars.attuid = "<%= attuid %>";
            flashvars.strData = "<%= strData %>";
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
                params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "SampleView";
            attributes.name = "SampleView";
            attributes.align = "middle";
            swfobject.embedSWF(
                "/flex/EView/HelpViewdesign.swf ", "flashContent",
                "100%", "700",
....
In MainApp.mxml:
-----------------------
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           xmlns:comp="com.att.ntscp.view.component.*"
                           skinClass="com.att.ntscp.view.style.CommandApplicationContainerSkin"
                           width="100%" height="700" creationComplete="onCreationComplete();"
                           xmlns:scpt="com.att.ntscp.view.script.*">
............


For the above implementation in my code ,Now it is showing width 100% correctly,
height showing 700 with scrollbar not fit to browser.

so , I tried by making height to 100% as well in .jsp and .mxml. For this , width is showing 100% correctly, for height not showing scrollbar either in browser or in my App. Not showing most of Data.
Could you please help me how i can fit myApp scrollbar fit to browser scrollbar without lost of data.
I mean showing scrollbar fit to browser.

0
 
LVL 17

Expert Comment

by:deepanjandas
ID: 34939992
I am sorry Alpita, I am confused about the exact problem.
Is there any place I can see the url?

And do you want a vertical scroll bar in your web page so that the full height of your application is visible by scrolling down?

Warm Regards
Deepanjan Das
0
 

Author Comment

by:Alpita
ID: 34940049
Yes, I want the vertical scroll bar. Now it is appearing inside the brower.But i want it to appear to fit to the browser. You can see the vertical scrollbar in the screen shot which is inside the browser.
sampleImg.bmp
0
 
LVL 17

Expert Comment

by:deepanjandas
ID: 34940139
Cool, so do the following:
1. In flex environment, set the Application height as 700, I see you have already done that. Be sure that the actual Application height is not more than 700.
2. In html page, set the flash object height to 700, which is also done as I can see from your code.
3. Now in the styles section in html page try this:
<style type="text/css" media="screen">
    body { margin:0; padding:0; text-align:center; background-color: #ffffff; }
    #flashContent { display:none; }
</style>

Open in new window


Warm Regards
Deepanjan Das
0
 

Author Comment

by:Alpita
ID: 34940224
Hi Expert,

Thanks for your fast response. I tried with above code.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title><%= TRACE_TITLE %></title>
        <style type="text/css" media="screen">
                body { margin:0; padding:0; text-align:center; background-color: #ffffff; }
                #flashContent { display:none; }
        </style>
        <script type="text/javascript" src="/flexapp/E2EView/swfobject.js"></script>

        <script type="text/javascript">
            var swfVersionStr = "0";
            var xiSwfUrlStr = "";
            var flashvars = {};
            flashvars.attuid = "<%= attuid %>";
            flashvars.strData = "<%= strData %>";
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
                params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "CmdHelpView";
            attributes.name = "CmdHelpView";
            attributes.align = "middle";
            swfobject.embedSWF(
                "/flexapp/E2EView/CmdHelpViewRedesign.swf ", "flashContent",
.....

Still showing the same . I am attaching my mainApp.mxml

myApp.txt
0
 
LVL 17

Expert Comment

by:deepanjandas
ID: 34940295
Also share the whole html pls.

Warm Regards
Deepanjan Das

0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Alpita
ID: 34940345
Please find the attached .jsp here with..
myjsp.txt
0
 
LVL 17

Expert Comment

by:deepanjandas
ID: 34940378
Here are the files which works perfect in my machine with a scroll on the webpage as desired.
Hope this helps.
FlexSolution.mxml.txt myjsp.htm.txt
Warm Regards
Deepanjan Das
0
 

Author Comment

by:Alpita
ID: 34945408
Hi Expert,

I got your point and tried with the above changes in my application.In my local, It is showing browser scrollbar with in the height = 1200. Because i have little testdata(4 collapsabel panels) only.
when i use this in my dev environment, dynamically more data(more collapsabel panels) is coming, showing browser scrollbar as well i am seeing inside scrollbar.
I also tried with height=2000, it is showing  browser scrollbar up to height=2000, after wards both scrollbars are showing.Same as above.
when i use height=100%, i am seeing scrollbar inside the browser only.I mean no browser scrollbar is showing this time.
Is this any IE issue?
Do you want me to put my files with testData()?
0
 

Author Comment

by:Alpita
ID: 34945653
In .jsp i changed height = 2000;
In myApp.mxml:
---------------
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           xmlns:comp="com.att.ntscp.view.component.*"
                           skinClass="com.att.ntscp.view.style.ApplicationContainerSkin"
                           width="100%" height="2000" creationComplete="onCreationComplete();"
                         .....

......
<mx:Canvas id="vb" width="100%" height="2000">
      <scpt:CmdHelpContainer id="cmdContainer" width="100%" height="2000"/>
      </mx:Canvas>

Please find my attached screenshots(using ht = 2000)
one with browser scrollbar
other with 2 scrollbars(when i exapand one collapsable bar)
Appht2000.bmp
Appwith2scbars.bmp
0
 
LVL 17

Expert Comment

by:deepanjandas
ID: 34948323
The concept is that if a content fits within its container, then there will be no scroll of the container.
If the content increases in height more than the height specified for its container, it makes its parent show a scroll bar.
The same is happening here.
Whenever you get to see a scrollbar inside the application, it means that the content height has increased and is more than the height of its container.

SO I guess What you need here is a dynamic height for your application. In this case percentage will NOT AT ALL WORK :).

What you may try is as the content increases, increase the height of your container and go on in that hierarchy till you also adjust the height of your Application in application tag in runtime. Along with that you need to call a javascript on page to increase the size in the swfobject tag as well.
That way you problem will be solved.

Warm Regards
Deepanjan Das
0
 

Author Comment

by:Alpita
ID: 34957717
Hi Expert,

Now i am able to call javascript function with some alert message from flex in some condition where height is need to be increased.
In .html  i have this:
---------------------------------------------
 <style type="text/css" media="screen">
                  html, body      { height:1200; }
                  body { margin:0; padding:0; overflow:auto; text-align:center;
                         background-color: #ffffff; }
                  #flashContent { display:none; }
        </style>

<script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
            var swfVersionStr = "10.0.0";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
           var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "CmdHelpView";
            attributes.name = "CmdHelpView";
            attributes.align = "middle";
            swfobject.embedSWF(
                "CmdHelpViewRedesign.swf", "flashContent",
                "100%", "1200",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
</script>

<script type="text/javascript">
                    function checkResult()
                    {
                          alert("this is java script function");
                    }
        </script>

Could you please let me know how i increase height in the swfobject  when the checkResult() is called?

Thanks,
Alpita


 
0
 
LVL 17

Accepted Solution

by:
deepanjandas earned 500 total points
ID: 34957764
You may see this: http://swffit.millermedeiros.com/
Also try this:
<script type="text/javascript">

function getFlashObj(movie){
   if (window.document[movie]) {
      return window.document[movie];
   }
   if (navigator.appName.indexOf("Microsoft Internet")==-1) {
      if (document.embeds && document.embeds[movie]) {
         return document.embeds[movie]; 
      }
   } else {
      return document.getElementById(movie);
   }
}

function checkResult( w )
{
   //alert("this is java script function");
   getFlashObj("CmdHelpView").style.width = w;
}

</script>

Open in new window


Warm Regards
Deepanjan Das
0
 

Author Closing Comment

by:Alpita
ID: 34958062
Thank you very much!

Warm Regards,
Alpita
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Closing FLash Privacy/Video Panel 2 826
Is this doable in Flex/AIR - pointers? 5 248
html into FLEX 3 261
EditText on the DialogBox 1 366
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Are you unable to connect or configure Hotmail email account in Microsoft Outlook 2010, 2007? Or Outlook.com emails are not downloading to Outlook? Lets’ see the problem and resolve Outlook Connector error syncing folder hierarchy (0x8004102A).
This video discusses moving either the default database or any database to a new volume.
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now