css for page tabs - West Wind Technologies Support

FoxInCloud

css for page tabs

css for page tabs
Tuvia Vinitsky
All

Oct 29, 2014 @ 09:16am

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

4740LGV6Y

Oct 29, 2014 @ 10:00am

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

-- thn (FoxInCloud)

Re: css for page tabs
Tuvia Vinitsky
Thierry Nivelet (FoxInCloud)

4740QI5B0

Oct 29, 2014 @ 12:21pm

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

47502T2VR

Oct 30, 2014 @ 01:18am

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

-- thn (FoxInCloud)

Re: css for page tabs
Tuvia Vinitsky
Thierry Nivelet (FoxInCloud)

4760WCDBP

Oct 31, 2014 @ 03:05pm

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

47903AX92

Nov 3, 2014 @ 01:32am

What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

-- thn (FoxInCloud)

Re: css for page tabs
Tuvia Vinitsky
Thierry Nivelet (FoxInCloud)

4790G12XM

Nov 3, 2014 @ 07:28am

Something like this:

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

47A0A7GV2

Nov 4, 2014 @ 04:45am

OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.

We need to implement other tabs positioning schemes such as the one you're looking at (though out of VFP support), and support all values of .tabOrientation, .tabStyle and .tabJustify (for now we support .tabOrientation = 0 and all values of .tabJustify)

Something like this:

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

-- thn (FoxInCloud)

Re: css for page tabs
Tuvia Vinitsky
Thierry Nivelet (FoxInCloud)

47A0MO3CF

Nov 4, 2014 @ 10:34am

I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.

OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.

Something like this:

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

Re: css for page tabs
Tuvia Vinitsky
Thierry Nivelet (FoxInCloud)

47A0MV1RI

Nov 4, 2014 @ 10:39am

I would rather have support for dhtmlxAccordion.

OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.

Something like this:

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

47B01L5R2

Nov 5, 2014 @ 12:44am

then this code should work:

$('tabID').observe('click', function(event){$('pageFrameID').tabClick(event);}); // prototype.js syntax
jQuery('#tabID').click(function(event){$('pageFrameID').tabClick(event);}); // jQuery syntax, you could also use a .class selector to assign .click() to all tabs at once

I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.

-- thn (FoxInCloud)

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

47B01QQ18

Nov 5, 2014 @ 12:48am

I don't think we will support another JavaScript library like dhtmlx because it would incur an additional license cost.

This reminds me that in the early ages of FoxInCloud we have compared ActiveWidget and dHTMLx grids, and chose ActiveWidget.
At that time (2006), dHTMLx was quite poor and difficult to use.
Same story as for Prototype.js and jQuery, Windows and Mac - the early starters are not always the winners

I would rather have support for dhtmlxAccordion.

OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.

Something like this:

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

-- thn (FoxInCloud)

Re: css for page tabs
Tuvia Vinitsky
Thierry Nivelet (FoxInCloud)

47B0NIY6T

Nov 5, 2014 @ 10:58am

Good point. Last night I just rolled my own by putting some js code in the containers to mimic sliders. I'll send it to you if you want to see what I did.

I don't think we will support another JavaScript library like dhtmlx because it would incur an additional license cost.

I would rather have support for dhtmlxAccordion.

OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.

Something like this:

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

47C013OG3

Nov 6, 2014 @ 12:30am

Sorry, as tab won't exist, .tabClick() won't work;
use .pageActivate(pageID, true) instead

then this code should work:

$('tabID').observe('click', function(event){$('pageFrameID').tabClick(event);}); // prototype.js syntax
jQuery('#tabID').click(function(event){$('pageFrameID').tabClick(event);}); // jQuery syntax, you could also use a .class selector to assign .click() to all tabs at once

I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.

-- thn (FoxInCloud)

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

47C0LA16N

Nov 6, 2014 @ 09:55am

to do that you can implement your button.click() as follows:

if thisform.wlHTMLgen
return textmerge([$('<<wcID(this.Parent.pageFrame)>>').pageActivate('<<wcID(this.Parent.pageFrame.Pages(xx))>>');]) && where xx changes for each button
endif

I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.

OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.

Something like this:

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?

-- thn (FoxInCloud)

Re: css for page tabs
FoxInCloud Support - Thierry N.
Tuvia Vinitsky

47C0MT6R7

Nov 6, 2014 @ 10:38am

or even more simple,

procedure click && of 'page tab' commandButton
if thisform.wcHTMLgen
  return
endifthis.parent.pageFrame.activePage = xx && xx changes according to button

you could even use a combo box or a commandgroup or a optiongroup instead of separate commandButtons
you could also create a container class with a pageframe and the appropriate 'page tab' simulation control(s) like above listed

to do that you can implement your button.click() as follows:

if thisform.wlHTMLgen
return textmerge([$('').pageActivate('');]) && where xx changes for each button
endif

I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.

OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.

Something like this:

can you post some screenshot of what you want as a result?

Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.

I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:

Then we add to the xxx.css

div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
	background-repeat:no-repeat!important;
    background-size:100% 100%!important;
	width:115px!important;
	border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
	color:grey!important;
}
#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}

That gives us:

Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}

That works fine. So I tried stacking the inner tabs like this:

#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}

And I got this:

I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.

can you post code and screenshot of what you get?

I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.

Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.

#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}

$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
  $$('#myPgf .page.awpag.pageTab').each(...);
});

conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation

my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.

Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?