Can I add round cornres to HtmlPanelGrid in code or in page? If yes - how?

Question

Hi all! I have a task - add round corners to HtmlPanelGrid. Now I am trying to do it with css (using 4 images for each corner - that css create our designer). I load css and try to do this in my code:

this.grid = new HtmlPanelGrid();
this.grid.setStyleClass("toplist,toplist-top");

But no changes I could see in my page.

I tried to load css and use it with tags, but it also didnt work and created one more problem - my jsf didn't reload and redisplay:

<div class="toplist">
<div class="toplist-top"><h2>Top 10 List</h2></div>
<div class="toplist-bg">
    <div class="toplist-cont">
    <rich:tab label="Top-List" id="screenTop">
    <h:panelGrid id="topListTable" binding="#{chartBean.topListTable}" />
    </rich:tab>

    <a4j:support event="onclick" reRender="menuSection" actionListener="#{chartBean.doChangeTab}" />
     </div>
</div>
<div class="toplist-bottom"></div>
    </div>

I am interesting of adding round corners to topListTable in the code. How can I do it?

I load my css as:

 <link href="#{facesContext.externalContext.requestContextPath}/css/stylesheet.css" rel="styleSheet" type="text/css"/>  

If anybody knows, how can I add corners to the panelGrid.

Sorry for stupid question, but I am newborn in jsf and richfaces, and I want to solve this task right

Thanks!

Answer 1

Consider using curvycorners for this. Google it to find out what it is all about.

Another thing to consider are browser incompatibilities. For example, the following css which applies round corners to rich:modalPanel components works perfectly in Safari, but no in IE

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

}

<rich:modalPanel id="mpt" shadowDepth="10" keepVisualState="true" 
   showWhenRendered="true" moveable="true" style="-moz-border-radius: 5px;">

You might consider using images for your corners to avoid this kind of incompatibility.

See

http://www.webdevelopersnotes.com/tips/html/complex_advanced_rounded_corners_html_tables.php3

for further reference.

Answer 2

I think jQuery is a good way to go. (see linked tutorial)

There are some complications when using with richfaces, so check <rich:jQuery> and its documentation.

Answer 3

Hi all! The task has been changed((( The designer decided, that the rounded corners will be done with images and give me css files with selectors, which, he suppose, work with component, which surronds my HtmlPanelGrid.

But there is a problem - HtmlPanelGrid is a children of myfaces.Div. So I have a several myfaces.Divs, each of that have a HtmlPanelGrid as its child. Both Div and HtmlPanelGrid are generated in the code:

public TopListChartWrapper(Iterator<Entry> treeIt) {
    this.grid = new HtmlPanelGrid();
    this.grid.setColumns(2);
    this.grid.setBorder(0);
    this.grid.setCellpadding("0");
    this.grid.setCellspacing("0");
    this.grid.setWidth("100%");
    this.grid.setRowClasses("list-row-even,list-row-odd"); 

    this.grid.setStyleClass("toplist-top"); 
    this.grid.setStyle("margin: 50px");
    //this.grid.setFooterClass("toplist-top");

    this.treeIterator = treeIt;
    this.prepareGrid();
}

private Div getDiv() {
    Div div = new Div();
    div.setId(DIV + RANDOM.nextInt(10000));
    HtmlDropSupport dropSupport = new HtmlDropSupport();
    ChartBean chartBean = ChartBean.getInstance();
    dropSupport.setAcceptedTypes(UNIT + chartBean.getChartValue());
    dropSupport.setDropValue(UNIT + chartBean.getChartValue());
    dropSupport.addDropListener(new DropListenerImpl());
    dropSupport.setReRender(this.getName());
    div.getChildren().add(dropSupport);
    div.setStyleClass(this.getDivStyle());

    return div;
}

So I need to set them a styleClasses, but the problem in that - I can set up only one styleClass for Div, but I need to style Div in footer and in header with different styles.

Maybe somebody has the same task? and could help me! How I can set diff styles in myfaces.Div (one image - in head and another image in foot)? Or maybe there is a better way to work with Div?

Answer 4

Thank all for help! I figure out my problem - I add a several HtmlPanelGroups to my code, and add my table to one of these! Everything works as I want!

Thanks once more to everybody!

Best regards!

P.S.: How can I set this question is answered?