-
1. Re: rounded corner support out of the box
gonzalad Dec 22, 2011 3:55 AM (in response to gonzalad)Created https://issues.jboss.org/browse/RF-11848 to track this.
-
2. Re: rounded corner support out of the box
healeyb Dec 22, 2011 6:36 AM (in response to gonzalad)I suppose the issue for the developers is that without using background images you can't get rounded
corners in IE8 (don't know about IE9), and the approach often taken seems to be to not use rounded
corners at all, for any browser, which is unfortunate.
There a really good solution here http://css3pie.com/ using html script files (.htc) and I use this for
rounded corner buttons, but I just did a quick test on a rich:panel and voila! instantly I have a rounded
corner panel. I've tested this solution on IE8 and Chrome and I've found it to be reliable over the past
year or so.
Regards,
Brendan.
-
3. Re: rounded corner support out of the box
gonzalad Dec 22, 2011 1:53 PM (in response to healeyb)Thanks for the answer,
IMO since rounded corners have just an aesthetic usefulness (and not a functionnal one) a good compromise would be to just use CSS 3 styles (and modern browser equivalent ones) and just drop IE 8 support for this (IE 8 will display square corners) - as jQuery UI does.
This would enable to have a simple and enough usefull solution (I think).
-
4. Re: rounded corner support out of the box
josh68 Jan 5, 2012 12:09 PM (in response to healeyb)Hi, Brendan
I've added a config to my web.xml for parsing htc files (on WebSphere), but it's still failing. Did you do anything else to get cssPIE to work? Thanks.
<mime-mapping>
<extension>htc</extension>
<mime-type>text/x-component </mime-type>
</mime-mapping> -
5. Re: rounded corner support out of the box
healeyb Jan 5, 2012 8:03 PM (in response to josh68)Hi Josh, how is it failing? just not doing what it's supposed to do, or do you see any errors in the javascript
console when you load a page using this? I use it like this:
1. Put PIE.htc in the context-root/resources/scripts directory.
2. Add this to your project stylesheet:
.pie {
/* css3pie.com */
position: relative;
z-index: 0;
border: 1px solid #696;
padding: 2px 5px;
margin: 2px 2px;
text-align: center;
font-size: 11px;
font-weight: bold;
color: white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #2586d7;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2586d7), to(#66ccff));
background: -moz-linear-gradient(#2586d7, #66ccff);
background: linear-gradient(#2586d7, #66ccff);
-pie-background: linear-gradient(#2586d7, #66ccff);
behavior: url("#{resource['scripts:PIE.htc']}");
}
.pie:disabled {
/* css3pie.com */
position: relative;
z-index: 0;
border: 1px solid #696;
padding: 2px 5px;
margin: 2px 2px;
text-align: center;
font-size: 11px;
font-weight: bold;
color: #dfdfdf;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #2586d7;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2586d7), to(#66ccff));
background: -moz-linear-gradient(#2586d7, #66ccff);
background: linear-gradient(#2586d7, #66ccff);
-pie-background: linear-gradient(#2586d7, #66ccff);
behavior: url("#{resource['scripts:PIE.htc']}");
}
.pie:hover {
border: 1px solid #696;
padding: 2px 5px;
margin: 2px 2px;
text-align: center;
font-size: 11px;
font-weight: bold;
color: white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #66ccff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#66ccff), to(#2586d7));
background: -moz-linear-gradient(#66ccff, #2586d7);
background: linear-gradient(#66ccff, #2586d7);
-pie-background: linear-gradient(#66ccff, #2586d7);
behavior: url("#{resource['scripts:PIE.htc']}");
}
3. Use styleClass="pie" on anything you want to get the pie treatment, I use it mainly on h:commandButton
& a4j:commandButton.
Regards,
Brendan.
p.s. I think there's a cleaner way of structuring this css, I'll check...
-
6. Re: rounded corner support out of the box
saini.sushant Jan 5, 2012 3:45 PM (in response to josh68)Hey I had the same query couple of years ago . How to make the corners round without any image. This turned out to be huge for me as my client was hell bent on getting round corners and Richfaces does not have build in support for this. Somebody on Richfaces suggested using Jquery which isworking perfectly fine for my for last couple of year. Until you get Richfaces people to provide the support, use following for the same effect.
<script type="text/javascript" src="js/jquery.corner.js" />
$(function(){
jQuery("td.rich-tab-header").corner("top").css("background-color", "#8F98A0");
jQuery("div.rich-panel-header").corner("top").css("background-color", "#8F98A0");
jQuery("div.rich-stglpanel-header").corner("top").css("background-color", "#8F98A0");
});
}
-
7. Re: rounded corner support out of the box
gonzalad Jan 5, 2012 3:53 PM (in response to saini.sushant)Cool ! Even works on IE8 !
Thanks Sushant
-
8. Re: rounded corner support out of the box
healeyb Jan 5, 2012 8:28 PM (in response to gonzalad)Hey, jquery.corner.js is neat, thanks for pointing it out. It's also a third of the size of pie. Very nice
solution.
-
9. Re: rounded corner support out of the box
bleathem Jan 6, 2012 1:17 PM (in response to healeyb)Are there any community members who want to contribute a RichFaces skin providing rounded corners? We'd welcome the contribution!
-
10. Re: rounded corner support out of the box
healeyb Jan 8, 2012 9:17 AM (in response to bleathem)One fairly major problem for me with jquery.corner.js is that it doesn't support styline input
tags in IE, so that rules out commandButtons unfortunately. Maybe there's something else
out there, I will have a look...
-
11. Re: rounded corner support out of the box
josh68 Jan 9, 2012 2:11 PM (in response to healeyb)@Brendan, RE: pie.HTC:
Thanks.
I think my problem may have been the page-relative URL I was using in my CSS. However, I also learned how to actually define the mime type within WebSphere, and that may also have helped. On the plus side, I can now use background-image (stretched) for custom boxes with rounded-corner, gradient-filled borders. On the downside, it seems that this and other methods just fail in one way or another trying to add rounded corner support for jQuery UI widgets in older IE versions.
I may be giving up on that, but I may also try a js solution like jquery corner. The benefits of using htc files for IE-only support is attractive and works well for general CSS3 support, just not in conjunction with the jQuery UI.
-
12. Re: rounded corner support out of the box
gonzalad Jan 11, 2012 1:12 PM (in response to bleathem)@Brian, I'll try to contribute, but I've pb running showcase project with 'mvn jetty:run'.
What's the easiest way to test showcase before modifying .ecss code ?
Thanks
Note : I've forked RF on github (develop branch),
-
13. Re: rounded corner support out of the box
gonzalad Jan 11, 2012 5:27 PM (in response to gonzalad)Sorry ignore previous post, this was an error I forked showcase in richfaces sandbox project (very old one)...
-
14. Re: rounded corner support out of the box
gonzalad Jan 12, 2012 6:59 AM (in response to bleathem)Hello,
Just implemented round-border support with CSS 3.
See linked pull requests in https://issues.jboss.org/browse/RF-11848
Sorry, couldn't upload RF showcase to gae (don't have mobile phone - so no SMS ;( ).
Hope this helps