• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 842
  • Last Modified:

My app not getting fit to browser scrollbar

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
Alpita
Asked:
Alpita
  • 9
  • 7
1 Solution
 
deepanjandasCommented:
Set the minimum width and height of your application in the swfobject params instead of 100%.

Warm Regards
Deepanjan Das
0
 
AlpitaAuthor Commented:
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
 
AlpitaAuthor Commented:
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
Threat Trends for MSPs to Watch

See the findings.
Despite its humble beginnings, phishing has come a long way since those first crudely constructed emails. Today, phishing sites can appear and disappear in the length of a coffee break, and it takes more than a little know-how to keep your clients secure.

 
deepanjandasCommented:
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
 
AlpitaAuthor Commented:
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
 
deepanjandasCommented:
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
 
AlpitaAuthor Commented:
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
 
deepanjandasCommented:
Also share the whole html pls.

Warm Regards
Deepanjan Das

0
 
AlpitaAuthor Commented:
Please find the attached .jsp here with..
myjsp.txt
0
 
deepanjandasCommented:
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
 
AlpitaAuthor Commented:
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
 
AlpitaAuthor Commented:
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
 
deepanjandasCommented:
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
 
AlpitaAuthor Commented:
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
 
deepanjandasCommented:
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
 
AlpitaAuthor Commented:
Thank you very much!

Warm Regards,
Alpita
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now