Rounded corner in RichFaces component.

[marku25]

How to round horns in TabPanel, ModalPanel...?
Do you have some experience?

[marku25]

managed to do in FF but I don't know in IE and Opera ??
FF -moz-border-radius in CSS

[jimjamz]

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.

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

[nbelaevski]

Hello,

Hope this will be useful: http://www.smileycat.com/miaow/archives/000044.php

[marku25]

I tested "http://www.smileycat.com/miaow/archives/000044.php"
it not works (modalpanel).

[saini.sushant]

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.

[saini.sushant]

I am also interested in knowing how to get rounded corners for collapsible divs and Tabs.

[saini.sushant]

I am also interested in knowing how to get rounded corners for collapsible divs and Tabs.

[nbelaevski]

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

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

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

[saini.sushant]

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.

[saini.sushant]

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.

[narvava]

HI Sushant,

Could you please say, how can I use rndCorners() function for individual components like rich panel and data table etc.

Regards,

Naresh