Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [Solved] App Studio - Center a form or panel

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[Solved] App Studio - Center a form or panel
 Login/Join
 
Mike in DeLand
Guru
posted
Hi,
I would like to place a form, containing my parameters, onto an html page using App Studio, and I want the form to be centered on the page, so that when you resize the browser, the form stays in the center. I know I'm missing the obvious simple answer, but I've been fighting it all afternoon.
Any ideas would be most appreciated.

This message has been edited. Last edited by: Mike in DeLand,


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report This Post
Squatch
Master
posted Hide Post
I have a partial solution for you. Set the following form properties like this:

Left: <Not Set>
Margin: 0px auto
Top: <Not Set>
Position: <Not Set>


Set the properties for anything inside the form (e.g., buttons) like this:

Position: relative


Your form might disappear from view while you do this. If that happens, scroll to the right in your design tool until you find it.

I cannot seem to center it vertically, however. In standard HTML, the above settings should do the trick. But not in WebFOCUS.

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


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Mike in DeLand
Guru
posted Hide Post
Thanks. Will try that.

I set up a panel, and then a CSS file to center the panel, and that worked ok, but I like your idea better.


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report This Post
Squatch
Master
posted Hide Post
I forget to mention that the form needs this setting changed as well:

Position: <Not Set>


I will edit my post above and add that in.


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Barry Solomon
Silver Member
posted Hide Post
Hi Mike

Try fooling around with this:

function onInitialUpdate(){

//width of groupbox1 is 600
var scrWidth=screen.width;
var grpbxWidth = document.getElementById('groupbox1').offsetWidth;
var setWidth = ((scrWidth - grpbxWidth)/2);
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);
document.getElementById('groupbox1').style.left = setWidth;

Maybe jQuery can do this easier but not sure of the commands.

Thanks Barry


WebFOCUS 8
Windows, All Outputs
 
Posts: 34 | Registered: September 08, 2015Report This Post
Squatch
Master
posted Hide Post
Got it!

Properties for your form:

Position: absolute
Top: 0px
Bottom: 0px
Left: 0px
Right: 0px
Margin: auto


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Mike in DeLand
Guru
posted Hide Post
It was easy after all.

Just change the margin to 0px auto on the outermost item (in my case it was a panel) and blank out the position, top, left attributes. The inner items can be left unchanged. Thanks to all!


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [Solved] App Studio - Center a form or panel

Copyright © 1996-2020 Information Builders