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]Responsive Pages on Portal - background color

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED]Responsive Pages on Portal - background color
 Login/Join
 
Guru
posted
Hi,
I'm experimenting with responsive pages on my portal, and they're great, except that no matter what I do, the background color is white and I can't get it to be transparent. Does anyone know how I can get that done? Thanks!

This message has been edited. Last edited by: <Emily McAllister>,


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report This Post
Virtuoso
posted Hide Post
Transparent in relation to what? I don't think that is apart of the product unless you go into the portal CSS/Js and reset it there if it's accessible.

Good luck!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Guru
posted Hide Post
I'm using one of the predefined themes in my portal, so I expected all the pages to have the same background color. The responsive pages only have a white background, no matter what I do. I'll keep playing with it though. Thanks.


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report This Post
Master
posted Hide Post
Check your fex or HTML pages used in the portal are set to the background as Transparent.

On the second note, you'll find that the portal responsiveness is only half implemented. If you set the height of your portal page to auto, it jumps to 1px. So you have to give it a fix height, which means, you will have a scroll-bar that scrolls down to nothing, until you shrink your browser, then it fits.. I ended up scrapping their containers and built my own HTML 5 pages, that is responsive and use that within the portal for security. Believe it or not, CSS3 (max-width, min-width, float: left, and @media) does all the work needed for mobile responsive.

This is the only @Media I used and everything else was done with standard CSS and using percentages for width.
@media only screen and (min-width: 972px)
{
	.parent-container {width: 48.2%;}
}

@media only screen and (min-width: 700px) and (max-width:972px)
{
	.parent-container {width: 97%;}
}

@media only screen and (max-width: 700px)
{
	.parent-container {width: 95%;}
}


Sorry, I had to redacted a lot of this even though it's all just stuff I made up. This page is 100% data driven. Our database tells us how many parent containers, which by the one is one fex. Our database tells us how many child containers to put in each parent container, which by the way is one fex. Our database even tells us what fex to pull in for each child container. Our DB tells us what colors and icons to use for each child container, even though it's all the same container/fex.

Full Screen



Small devices see



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Gavin,

Thanks for the share! Way good idea and neat output. Do you have a good place that you would suggest as a resource to learn how to use these @media queries and the css needed to do what you are doing? Or would you be willing to PM me some of your code to get me started on replicating this type of implementation? I would love to not have to use IBI's half-baked responsive paneling if I didn't have to. I am just not quite there yet with my web skills.

Thanks again!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Master
posted Hide Post
The @media I posted is really the only thing you need, as long as you have a parent-container/"DIV" around all your other code/"DIV".

But here is all you never wanted to know about @media.
http://www.w3schools.com/cssre...s3_pr_mediaquery.asp

Float:
http://www.w3schools.com/cssref/pr_class_float.asp

max-width:
http://www.w3schools.com/cssref/pr_dim_max-width.asp

min-width:
http://www.w3schools.com/cssref/pr_dim_min-width.asp

One of the biggest things I found out about HTML5 and the use of DIVs in replacement of TABLEs, is the style "DISPLAY". Display is more than just hidden and visible, it can also be used as TABLE, TABLE-ROW, and TABLE-CELL. So you create your DIV the same way you would a HTML table and make sure each DIV matches what tag you wanted it to be.

http://www.w3schools.com/cssref/pr_class_display.asp

Example:
http://jsfiddle.net/gavinlandon/8u409vLq/

<html>
<head>
	<style>
		@media only screen and (min-width: 972px)
		{
			.table {width: 48.2%;}
		}
		
		@media only screen and (min-width: 700px) and (max-width:972px)
		{
			.table {width: 97%;}
		}
		
		@media only screen and (max-width: 700px)
		{
			.table {width: 95%;}
		}
		
		html body {padding: 0px; margin: 0px;}
		.table {display: table; float: left; margin-left: 10px; margin-top: 10px; padding: 0px;}
		.row {display: table-row}
		.col {display: table-cell; border: 1px solid black; padding: 2px;}
	</style>
</head>
<body>
	<div class="table" style="border: 1px solid red;">
	    <div class="row">
	        <div class="col">
	            Row 1 Column 1
	        </div>
	        <div class="col">
	            Row 1 Column 2
	        </div>
	    </div>
	    <div class="row">
	        <div class="col">
	            Row 2 Column 1
	        </div>
	        <div class="col">
	            Row 2 Column 2
	        </div>
	    </div>
	</div>
	<div class="table" style="border: 1px solid blue;">
	    <div class="row">
	        <div class="col">
	            Row 1 Column 1
	        </div>
	        <div class="col">
	            Row 1 Column 2
	        </div>
	    </div>
	    <div class="row">
	        <div class="col">
	            Row 2 Column 1
	        </div>
	        <div class="col">
	            Row 2 Column 2
	        </div>
	    </div>
	</div>
</body>
</html>

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



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Thanks Gavin! Really appreciate the links and information!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Virtuoso
posted Hide Post
So, another question I have for you Gavin is where/how are you referencing .fexes within each of your table col divs? How/where do you add the reference to get them to populate therein? With your implementation, can you still drag and drop resources from the resource tree into your HTML? And can global filtering from another HTML form in the portal left banner still pass default and selected param values to each of these col divs? Ultimately, how do you facilitate these 2 things with your responsive HTML page layout? Are you creating your own filtering within the same HTML and somehow connecting the user to their resources within that realm as well somehow? I guess I can see this as a nice thing if you have a locked down canned reports/graphs type page for one of your portals, but there may be a lot more complexity to add if you want to allow the user to be able to drop in their own content from their My Content folder, etc. and be able to filter all col div content based from a single form somewhere.


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Master
posted Hide Post
quote:
where/how are you referencing .fexes within each of your table col divs?

iframes..

quote:
With your implementation, can you still drag and drop resources from the resource tree into your HTML?

Not mine specifically, but if you want the complexity you have several options. Bindows, which is what IBI is using, or you can use JavaScript for HTML5.
http://www.w3schools.com/html/...tryhtml5_draganddrop

quote:
And can global filtering from another HTML form in the portal left banner still pass default and selected param values to each of these col divs?

Yes. All my "HTML" is actually within a FEX, therefore all parameters are still the same and are passed the same.

quote:
Ultimately, how do you facilitate these 2 things with your responsive HTML page layout? Are you creating your own filtering within the same HTML and somehow connecting the user to their resources within that realm as well somehow?

Responsive layout is at the client side (HTML/CSS) only. So it's has nothing to do with any of the backend coding.

quote:
I guess I can see this as a nice thing if you have a locked down canned reports/graphs type page for one of your portals, but there may be a lot more complexity to add if you want to allow the user to be able to drop in their own content from their My Content folder, etc. and be able to filter all col div content based from a single form somewhere.

This solution isn't for everyone as each of us have our own requirements. We don't let the customer change what reports are set, instead we preselect what needs to be and they have the options of turning them on or off. If you look at my photo, you will see a "Wrench" in the top left corner of each parent container. We have a max of 4 child containers that can fit within that parent, for size reasons and because it needs to be related to the parent title.



After unchecking the first and third one and clicking OK, I get this. This is how we handle what reports they can and cannot see.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Thanks for the information Gavin!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report 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]Responsive Pages on Portal - background color

Copyright © 1996-2020 Information Builders