Skip to Content (Press Enter)
OutSystems.com
Personal Edition
Community
Support
Training
Training
Online Training
Developer Schools
Boot Camps
Certifications
Tech Talks
Documentation
Documentation
Overview
ODC
O11
Forums
Forge
Get Involved
Get Involved
Jobs
Ideas
Members
Mentorship
User Groups
Platform
Platform
ODC
O11
Search in OutSystems
Log in
Get Started
Back to Forums
Alick Cheung
17
Views
6
Comments
not displaying background gradient color at runtime
Question
Hi, we are using the version 8.0.1.20 Service Studio. I created a panel with background gradient color in CSS. During the design time, I am able to see the effect. But when i run it, no matter firefox or IE, i do not see the effect. Actually the background turns into white.
here is the CSS code i put in:
background:
-webkit-linear-gradient(red, blue);
/* For Safari 5.1 to 6.0 */
background:
-o-linear-gradient(red, blue);
/* For Opera 11.1 to 12.0 */
background:
-moz-linear-gradient(red, blue);
/* For Firefox 3.6 to 15 */
background:
linear-gradient(red, blue);
/* Standard syntax */
Daniel Martins
Hello Alick,
Here by a link to a fiddle that I create to help you out:
https://jsfiddle.net/gk6xmsz6/
Should work if you implemented as above.
Is that panel implemented in one div?
Hope it helps you!
Best regards
Daniel Martins
Alick Cheung
Good morning Daniel,
here is the div i put in the css:
.RoundPanelGrad
{
border-radius
: 10px;
padding
: 15px;
box-shadow
: 10px 10px 5px #C0C0C0;
background
: -webkit-linear-gradient(left, #606060, #E8E8E0);
/* For Safari 5.1 to 6.0 */
background
: -o-linear-gradient(right, 606060 , #E8E8E0);
/* For Opera 11.1 to 12.0 */
background
: -moz-linear-gradient(right, 606060 , #E8E8E0);
/* For Firefox 3.6 to 15 */
background
: linear-gradient(to right, 606060 , #E8E8E0);
/* Standard syntax */
}
I click the link to fiddle, i also see white background on my screen.
Alick Cheung
actually i use chrome or ipad to view it, it is perfect. Me and my colleagues have IE 8, 9 and 11, they donot see the correct background, nor my firefox 32. This is very interesting. Again, the problem only happens at runtime, not design time though.
João Rosado
Staff
Hi Alick,
Service Studio uses a webkit based rendering, so it will follow the "
-webkit-"
rule as Chrome does, or the standard one if valid.
For Firefox, IE 10 and IE 11 you are missing the # character on the first color, making it invalid.
Works if you add it:
https://jsfiddle.net/k3f1jwbr/1/
(tested in firefox 35 ...but should work on all 16+ as well)
For IE 8 and 9 it just won't work, since it doesn't support gradients at all. Please don't try to use the filters to make it work there ..my experience with filters = memory leaks.
Regards,
João Rosado
João Rosado
Staff
Hi again,
Tested it a bit more and noticed a couple more problems with your css.
Also following the recommendations from MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Cross-browser_gradients
Here is an updated jsfiddle:
https://jsfiddle.net/m2ztuy9a/
So what changed:
On opera and in firefox 3.6 - 16 the gradient was being showed inversed when compared with Chrome and other versions of Firefox. So changed the "right" to "left" on those 2.
Changed the "background" to "background-image" (think this is to prevent it from overriding the "background-color")
Start with a "background-color" so that if it's shown in IE 8 and 9 it has a color to fallback to (you may need to ajust the fallback color)
Regards,
João Rosado
Alick Cheung
Thank you so much
João
, it works in my firefox and IE 11. You guys are awesome
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
See the full guidelines
Loading...