Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED]how to remove scroll bar
Go
New
Search
Notify
Tools
Reply
  
[SOLVED]how to remove scroll bar
 Login/Join
 
Gold member
posted
I have a Chart and Report within same .fex file, but when I run the page it show scrollbar(vertical), I want to keep Autofit so I set it as 'ON GRAPH SET AUTOFIT RESIZE'.

'ON GRAPH SET AUTOFIT RESIZE' ONLY work in initial load, after adjust resolution of the page, it show scrollbar again.

the scrollbar show because in this page contain both chart and report, but report only have 1 row of data, while chart as bar chart.

in order to not show scrollbar:
- adjust y-axis height?
- keep 'ON GRAPH SET AUTOFIT RESIZE' work even resolution changed?
- use some sort of HTMLFORM?

This message has been edited. Last edited by: nox,


WebFOCUS v8.2.06 , Windows
 
Posts: 73 | Registered: August 29, 2019Reply With QuoteReport This Post
Master
posted Hide Post
Can you replicate the issue with the car file or ggsales and post the code so we can run it on our end?


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 604 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
Gold member
posted Hide Post
Hi,

my Code as follow:



ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET SQUEEZE=ON
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

SET HTMLCSS=ON
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_ARVERSION=2;
SET ARVERSION=&WF_ARVERSION

-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-DEFAULTH &WF_SUMMARY='Summary';
-DEFAULTH &WF_TITLE='WebFOCUS Report';

TABLE FILE ibisamp/car
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.COMP.CAR EQ 'TOYOTA';
ON TABLE PCHOLD FORMAT HTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, SUMMARY=&WF_SUMMARY.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
ENDSTYLE
END
-RUN

GRAPH FILE ibisamp/car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES AS 'sales'
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET VAXIS 320
ON GRAPH SET AUTOFIT RESIZE
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setCurveFitEquationDisplay(false);

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
TYPE=TITLE, FONT='Microsoft JhengHei', SIZE=10, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
setFillColor(getSeries(0),new Color(79,92,255));
setColorMode(1);
*GRAPH_JS_FINAL
"xaxis": {
"labelLayout": {
"scroll": false
}
},
"pieProperties": {
"holeSize": "0%"
}

*END
ENDSTYLE
END

-RUN

This message has been edited. Last edited by: nox,


WebFOCUS v8.2.06 , Windows
 
Posts: 73 | Registered: August 29, 2019Reply With QuoteReport This Post
Platinum Member
posted Hide Post
This seems to work. Added some FOOTING blank lines to the chart and -HTMLFORM at the end to turn off scrolling:
  
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET SQUEEZE=ON
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

SET HTMLCSS=ON
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_ARVERSION=2;
SET ARVERSION=&WF_ARVERSION

-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-DEFAULTH &WF_SUMMARY='Summary';
-DEFAULTH &WF_TITLE='WebFOCUS Report';

TABLE FILE ibisamp/car
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.COMP.CAR EQ 'TOYOTA';
ON TABLE PCHOLD FORMAT HTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, SUMMARY=&WF_SUMMARY.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
ENDSTYLE
END
-RUN

GRAPH FILE ibisamp/car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES AS 'sales'
BY CAR.COMP.CAR
FOOTING
"</6"
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET VAXIS 320
ON GRAPH SET AUTOFIT RESIZE
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setCurveFitEquationDisplay(false);

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
TYPE=TITLE, FONT='Microsoft JhengHei', SIZE=10, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
setFillColor(getSeries(0),new Color(79,92,255));
setColorMode(1);
*GRAPH_JS_FINAL
"xaxis": {
"labelLayout": {
"scroll": false
}
},
"pieProperties": {
"holeSize": "0%"
}

*END
ENDSTYLE
END

-RUN
-HTMLFORM BEGIN NOEVAL
<style>
  html {overflow:hidden;}
</style>
-HTMLFORM END  


WF 8.2.06
Win10 / IE11
AHTML EXL2K PDF
 
Posts: 176 | Registered: October 19, 2010Reply With QuoteReport This Post
Expert
posted Hide Post
As you've probably realised, the combination of a table and chart will displace the chart below the report.

This is because the chart is calculated to take the full height of the resultant window and will never really take into account the height of the report.

You can play about with the height etc. of the components and switch the scroll bars off, or you could think laterally and convert the report into a "layer" independent of the chart.

Try this code at the beginning of your code and paly with the result to obtain a reasonable looking output.

-HTMLFORM BEGIN
<style>
table {position: absolute; right: 40px; top: 40px;}
</style>
-HTMLFORM END


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5684 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport This Post
Expert
posted Hide Post
You will notice using that code, that the tooltips are also affected.

To counter this use the CSS attribute="value" selector -

-HTMLFORM BEGIN
<style>
table[summary="Summary"] {position: absolute; right: 40px; top: 40px;}
</style>
-HTMLFORM END


An advantage of using this method is that resizing of the window should not result in scrollbars.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5684 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport This Post
Master
posted Hide Post
When looking at the window resize event listener, it it calculating the chart height to fit within the margins of the window body. Normally the chart is the only thing within the body, so this works. However, when an additional element is added to the body, the eventlistener is not taking the height of the additional element into consideration, and is setting the height of the chart to be basically 100% of the viewport minus any margins already set on the body. This causes to body to be expanded beyond the viewport of the window.

So, using a little JavaScript, you can find the height of the rendered table and add it to the bottom margin of the window. That way, as the window resizes, the event listener is fired, and it will calculate the height of the chart equal to the height of the body minus the top-margin and minus the bottom-margin. Since we add in the height of the table into the bottom margin, the chart height will now be shorter by the height of the table, and will stay within the viewport. It will just be the margin that has been pushed off the screen. However, since the margin is off the screen, this will trigger the scrollbar. So, you will also need to turn the overflow-y of the body to hidden to hide the scrollbar.

You can also change the AUTOFIT to ON so the chart fills the viewport on load and will resize to fit the container if the window resizes.
  
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET SQUEEZE=ON
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

SET HTMLCSS=ON
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_ARVERSION=2;
SET ARVERSION=&WF_ARVERSION

-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-DEFAULTH &WF_SUMMARY='Summary';
-DEFAULTH &WF_TITLE='WebFOCUS Report';

TABLE FILE ibisamp/car
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.COMP.CAR EQ 'TOYOTA';
ON TABLE PCHOLD FORMAT HTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, SUMMARY=&WF_SUMMARY.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
ENDSTYLE
END
-RUN

GRAPH FILE ibisamp/car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES AS 'sales'
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET VAXIS 320
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setCurveFitEquationDisplay(false);

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
TYPE=TITLE, FONT='Microsoft JhengHei', SIZE=10, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
setFillColor(getSeries(0),new Color(79,92,255));
setColorMode(1);
*GRAPH_JS_FINAL
"xaxis": {
    "labelLayout": {
        "scroll": false
    }
},
"pieProperties": {
        "holeSize": "0%"
}
*END
ENDSTYLE
END

-RUN

-HTMLFORM BEGIN
    <style>
        body{ overflow-y: hidden; }
    </style>
    <script>
        var body = document.querySelector('body');
        var bodyStyle = window.getComputedStyle(body, null);
        var bodyBottomMargin = parseInt(bodyStyle.marginBottom, 10);

        var table = document.querySelector('table[summary="Summary"]');
        var tableHeight = table.offsetHeight;
        body.style.marginBottom = bodyBottomMargin + tableHeight + 'px';
    </script>
-HTMLFORM END

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 604 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
Gold member
posted Hide Post
Awesome!! Thanks you guys, I end up using dbeagan and Hallway solution!


WebFOCUS v8.2.06 , Windows
 
Posts: 73 | Registered: August 29, 2019Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED]how to remove scroll bar

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.