Question

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

Update:

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 1

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?