Page 1 of 1

CSS width in styleClass not working on pe:inputNumber

Posted: 26 Jul 2012, 22:08
by vinnysoft
Hi,

I am using Primefaces Extensions 0.5.1 and trying to use an .css file to change CSS configurations of my page, but <pe:inputNumber> doesn't recognize some changes, even if I put some !important attributes. Here is some code example:

Not working example:

Page

Code: Select all

<pe:inputNumber 
id="peso"  
styleClass="inputPeso"  
decimalSeparator=","
thousandSeparator="."                                      
decimalPlaces="3"                                
value="#{produtoBean.produto.peso}"/>
CSS file

Code: Select all

.inputPeso
{
    width: 20px !important;    
    margin-left: 20px;
    float: left;
}
Working example:

Page

Code: Select all

<pe:inputNumber 
id="peso" 
style="width: 20px;"
styleClass="inputPeso"  
decimalSeparator=","
thousandSeparator="."                                      
decimalPlaces="3"                                
value="#{produtoBean.produto.peso}"/>
CSS file

Code: Select all

.inputPeso
{
    margin-left: 20px;
    float: left;
}
Does anyone have an idea about this problem?

Thanks!

Re: CSS width in styleClass not working on pe:inputNumber

Posted: 27 Jul 2012, 10:10
by Oleg
Have you looked in Firebug on which HTML element is styleClass="inputPeso" applied? Is it applied at all?

Re: CSS width in styleClass not working on pe:inputNumber

Posted: 27 Jul 2012, 23:19
by vinnysoft
Oleg wrote:Have you looked in Firebug on which HTML element is styleClass="inputPeso" applied? Is it applied at all?
I think it was applied for the div tag surrounding the input, and not for input instead (I don't know if this is the correct answer for you question).

I see this code on my firebug:

Code: Select all


<div class="ui-inputNum ui-widget inputPeso">
<div class="ui-helper-hidden">
<input id="formProduto:peso" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text" name="formProduto:peso">
</div>


I thought inputPeso class should be in input instead of div tag.

Thanks.

Re: CSS width in styleClass not working on pe:inputNumber

Posted: 28 Jul 2012, 11:04
by Oleg
I think it's correct for many PF components. Look Calendar e.g. So, you should write then

Code: Select all

.inputPeso input
{
    width: 20px !important;   
    margin-left: 20px;
    float: left;
}

Re: CSS width in styleClass not working on pe:inputNumber

Posted: 28 Jul 2012, 15:17
by vinnysoft
Oleg wrote:I think it's correct for many PF components. Look Calendar e.g. So, you should write then

Code: Select all

.inputPeso input
{
    width: 20px !important;   
    margin-left: 20px;
    float: left;
}
It worked! :D

But I didn't expect to inform the tag kind (e.g: input) after the class name in my CSS file. In other inputs I just use ".myInputClassName" and not ".myInputClassName input".

Thanks anyway, Oleg!