1 2 Previous Next 16 Replies Latest reply on Feb 24, 2012 3:48 AM by gonzalad

    rounded corner support out of the box

    gonzalad

      Hello,

       

      Is it possible to add rounded corner support to richfaces native styles ?

      Afterward, as a user just specify a kin property as roundCorner=4px and voila : all components have round corners.

       

      Something like jquery ui round-corner support (http://jqueryui.com/themeroller/) - using only css, no img.

       

      WDYT ?

       

      jQuery UI uses those styles for instance :

      1. -moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
      2. -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
      3. -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/;
      4. border-bottom-right-radius: 4px/*{cornerRadius}*/;
        • 1. Re: rounded corner support out of the box
          gonzalad
          • 2. Re: rounded corner support out of the box
            healeyb

            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

              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

                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

                  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

                    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

                      Cool ! Even works on IE8 !

                       

                      Thanks Sushant

                      • 8. Re: rounded corner support out of the box
                        healeyb

                        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

                          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

                            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...

                             

                            https://github.com/malsup/corner/issues/36

                            • 11. Re: rounded corner support out of the box
                              josh68

                              @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

                                @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

                                  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

                                    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

                                    1 2 Previous Next