[SOLVED]Responsive Pages on Portal - background color

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, 2010

CoolGuy

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, 2015

Ignored post by CoolGuy posted

Show Post

Mike in DeLand

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, 2010

Ignored post by Mike in DeLand posted

Show Post

GavinL

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, 2014

Ignored post by GavinL posted

Show Post

CoolGuy

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, 2015

Ignored post by CoolGuy posted

Show Post

GavinL

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, 2014

Ignored post by GavinL posted

Show Post

CoolGuy

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, 2015

Ignored post by CoolGuy posted

Show Post

CoolGuy

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, 2015

Ignored post by CoolGuy posted

Show Post

GavinL

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.