Calendar looks too big

bandeng · 10 Oct 2010, 05:46

I just started using JSF 2 and Primefaces 2.2 M1. I tried the calendar first but it looks too big on FF and Chrome, about 1.5 times as big as the one on the showcase page. I could not find the attribute for the size. This is my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
<link type="text/css" rel="stylesheet" href="css/smoothness/skin.css" />
</h:head>
<h:body>

<p:calendar mode="inline"></p:calendar>

</h:body>

</html>

Please advice. Thanks!

callahan · 10 Oct 2010, 15:37

Hi,

The skinning tips at the bottom of page 397 in the user's guide may help.

bandeng · 10 Oct 2010, 18:30

collahan,

Thanks a lot! It solves my problem.

callahan · 10 Oct 2010, 19:49

No problem

.

jellyfish · 17 Oct 2010, 13:19

Hi,

could you please detail how exactly you solved your problem?

I've read the guide and with PM 2.2M1 I cannot get this to take any effect, trying it like that:

<p:calendar
id="dateTimeField"
value="#{calendarBean.date1}" mode="inline" showWeek="true"
inputStyle=".yui-skin-sam .yui-calcontainer {
background-color: #FFFFCC;
border:1px solid #33CC00;
}
.yui-skin-sam .yui-calendar .calweekdaycell {
color: #33CC00;
}
.yui-skin-sam .yui-calendar td.calcell {
background: #CCFF66;
}
.yui-skin-sam .yui-calendar td.calcell.today {
background-color:#FFFFFF;
}
.yui-skin-sam .yui-calendar td.calcell.today a {
background-color:#FF9900;
}"
locale="EN"
onSelectUpdate="growl"
selectListener="#{calendarBean.handleDateSelect}"
navigator="true"
/>

So the CSS does not do anything. Doesn't matter if I define it inline in the xhtml file or in the external CSS file.

Thanks for posting a complete example, showing how to re-skin the calendar?

On a side note: PrimeFaces is pure genious.

Cheers!

callahan · 17 Oct 2010, 16:55

Hi,

The style classes in the above code are no longer correct. The PrimeFaces calendar component is no longer based on the YUI calendar, it's based on the jQuery UI datepicker. The style classes that now apply are described on page 36 of the user's guide.

grburgos · 19 Oct 2010, 17:00

Hi I have been trying to get the font size to work.

I have a skin.css file containing:

Code: Select all

.ui-widget,
.ui-widget .ui-widget{
    font-size: 12px !important;
}

On my jsf I have:

Code: Select all

<h:outputStylesheet library="css" value="skin.css" />

but its not working... I just want to set all the fonts size to 12.
Thanks for the help.

19 Oct 2010, 17:42

Make sure your css is located after PrimeFaces default skin css. Order is important in CSS.

grburgos · 19 Oct 2010, 18:03

I checked and no go...

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript" src="/fsftest/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script><script type="text/javascript" src="/fsftest/faces/javax.faces.resource/core/core.js?ln=primefaces"></script><script type="text/javascript" src="/fsftest/faces/javax.faces.resource/idlemonitor/idlemonitor.js?ln=primefaces"></script><link type="text/css" rel="stylesheet" href="/fsftest/faces/javax.faces.resource/growl/assets/growl.css?ln=primefaces" /><script type="text/javascript" src="/fsftest/faces/javax.faces.resource/growl/growl.js?ln=primefaces"></script><script type="text/javascript" src="/fsftest/faces/javax.faces.resource/tooltip/tooltip.js?ln=primefaces"></script><link type="text/css" rel="stylesheet" href="/fsftest/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces" /><script type="text/javascript" src="/fsftest/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces"></script><script type="text/javascript" src="/fsftest/faces/javax.faces.resource/dialog/dialog.js?ln=primefaces"></script><script type="text/javascript" src="/fsftest/faces/javax.faces.resource/button/button.js?ln=primefaces"></script><link type="text/css" rel="stylesheet" href="/fsftest/faces/javax.faces.resource/skins/sam/skin.css?ln=primefaces" /> 
        <link type="text/css" href="css/skin.css" />

As you can see its the last one. Yet the font is still the same size on all the widgets. What Could I be doing wrong?

19 Oct 2010, 18:43

Firebug dom inspector would help here. It shows which style is applied to the widget.

Calendar looks too big

Who is online