-
1. Re: Rounded corner in RichFaces component.
marku25 Sep 6, 2009 12:03 PM (in response to marku25)managed to do in FF but I don't know in IE and Opera ??
FF -moz-border-radius in CSS -
2. Re: Rounded corner in RichFaces component.
jimjamz Sep 7, 2009 6:08 AM (in response to marku25)Can you post the code you use to do that? I tried to round the corners on a rich:ModalPanel by trying to override the custom style class names and still no success.
i.e..rich-modalpanel{ -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color: #ddeef6; }
Still original style rich:modalPanel.
I tried using style, styleClass. No success.
P.S.
webkit-border-radius works with Safari and I.E., but Opera I don't know the property for corners. -
3. Re: Rounded corner in RichFaces component.
marku25 Sep 7, 2009 8:28 AM (in response to marku25).rich-mpnl-header{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
.rich-mpnl-body{
background-color: #3C3C3C;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
}
.rich-mpnl-shadow{
-moz-border-radius: 5px;
}
and
<rich:modalPanel id="mpt" shadowDepth="10" keepVisualState="true" showWhenRendered="true" moveable="true" style="-moz-border-radius: 5px;">
-webkit-border-radius - works in Safari, no IE. -
4. Re: Rounded corner in RichFaces component.
nbelaevski Sep 7, 2009 10:52 AM (in response to marku25)Hello,
Hope this will be useful: http://www.smileycat.com/miaow/archives/000044.php -
5. Re: Rounded corner in RichFaces component.
marku25 Sep 7, 2009 1:14 PM (in response to marku25)I tested "http://www.smileycat.com/miaow/archives/000044.php"
it not works (modalpanel). -
6. Re: Rounded corner in RichFaces component.
saini.sushant Sep 9, 2009 1:48 PM (in response to marku25)For Firefox you can use the -moz-border-radius but unfortunately there is no way to do it in IE. I have seen almost all the ways mentioned on Internet for rounded corners in IE but could not achieve it properly.
For example for panel in Richfaces , using CSS you just have the access to 3 divs for styling. These divs are 1 for body, 1 for header and 1 for overall panel. Its impossible to achieve rounded corners these 3 divs only.
Some of the other frameworks use images at the corner of the divs and then mention these images in CSS. User can then simple replace these images to achieve any kind of corners. Richfaces should try to achieve something like this as it makes the look and feel more customizable. -
7. Re: Rounded corner in RichFaces component.
saini.sushant Sep 9, 2009 2:15 PM (in response to marku25)I am also interested in knowing how to get rounded corners for collapsible divs and Tabs.
-
8. Re: Rounded corner in RichFaces component.
saini.sushant Sep 9, 2009 2:18 PM (in response to marku25)I am also interested in knowing how to get rounded corners for collapsible divs and Tabs.
-
9. Re: Rounded corner in RichFaces component.
nbelaevski Sep 9, 2009 2:44 PM (in response to marku25)"saini.sushant@gmail.com" wrote:
For example for panel in Richfaces , using CSS you just have the access to 3 divs for styling. These divs are 1 for body, 1 for header and 1 for overall panel. Its impossible to achieve rounded corners these 3 divs only.
Well, I'd suggest the following possible options:
1. Add these elements via JavaScript (using ready solution from the link I've posted)
2. Create custom Facelets tag that will add necessary HTML elements to the user-defined content
3. Override/extend renderer for the component -
10. Re: Rounded corner in RichFaces component.
marku25 Sep 10, 2009 6:40 AM (in response to marku25)I rounded off.
<script src="../js/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("div.rich-mpnl-shadow").corner("cc:#91B7FD top");
jQuery("div.rich-mpnl-content").corner("cc:#91B7FD top 5pxd");
jQuery("div.rich-mpnl-header").corner("cc:#FFFFFF top 5px");
jQuery("td.rich-tab-header").corner("top").css("background-color", "red");
});
</script> -
11. Re: Rounded corner in RichFaces component.
marku25 Sep 10, 2009 6:41 AM (in response to marku25)"marku25" wrote:
I rounded off.<script src="../js/jquery.corner.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function(){ jQuery("div.rich-mpnl-shadow").corner("cc:#91B7FD top"); jQuery("div.rich-mpnl-content").corner("cc:#91B7FD top 5pxd"); jQuery("div.rich-mpnl-header").corner("cc:#FFFFFF top 5px"); jQuery("td.rich-tab-header").corner("top").css("background-color", "red"); }); </script>
-
12. Re: Rounded corner in RichFaces component.
saini.sushant Sep 10, 2009 3:41 PM (in response to marku25)Hi,
Thanks a lot for the solution :). It works perfectly for most of the components. However I saw a small issue, when a page is loaded, corners are round but if you use rerender the corners become pointed again after the Ajax request but I am sure this can be fixed easily. Thanks a lot. -
13. Re: Rounded corner in RichFaces component.
saini.sushant Sep 10, 2009 4:01 PM (in response to marku25)Here is a solution to the problem I mentioned in the last post.
<script type="text/javascript"> function rndCorners() { jQuery(function(){ jQuery("td.rich-tab-header").corner("top").css("background-color", "red"); jQuery("div.rich-panel-header").corner("top").css("background-color", "red"); jQuery("div.rich-stglpanel-header").corner("top").css("background-color", "red"); }); } </script>
Call this method on the oncomplete method of a4jSupport like this:<h:graphicImage url="/images/poc_ok.gif" rendered="#{category.selected}"> <a4j:support event="onclick" reRender="panel" oncomplete="rndCorners()"></a4j:support> </h:graphicImage>
Basically call the Jquery again after the AJAX rendering to round the corners again. -
14. Re: Rounded corner in RichFaces component.
narvava Apr 7, 2011 1:32 AM (in response to saini.sushant)HI Sushant,
Could you please say, how can I use rndCorners() function for individual components like rich panel and data table etc.
Regards,
Naresh