CSS width in styleClass not working on pe:inputNumber

Community Driven Extensions Project
Post Reply
User avatar
vinnysoft
Posts: 43
Joined: 07 Oct 2011, 23:51

26 Jul 2012, 22:08

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!
NetBeans 7.1.2 - Mojarra 2.1.11 - PrimeFaces 3.3.1 - PrimeFaces Extensions 0.5.1 - Apache Tomcat 7.0.29 - Hibernate 4.1.4-Final - MySQL 5.5

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

27 Jul 2012, 10:10

Have you looked in Firebug on which HTML element is styleClass="inputPeso" applied? Is it applied at all?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
vinnysoft
Posts: 43
Joined: 07 Oct 2011, 23:51

27 Jul 2012, 23:19

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.
NetBeans 7.1.2 - Mojarra 2.1.11 - PrimeFaces 3.3.1 - PrimeFaces Extensions 0.5.1 - Apache Tomcat 7.0.29 - Hibernate 4.1.4-Final - MySQL 5.5

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

28 Jul 2012, 11:04

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;
}
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
vinnysoft
Posts: 43
Joined: 07 Oct 2011, 23:51

28 Jul 2012, 15:17

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!
NetBeans 7.1.2 - Mojarra 2.1.11 - PrimeFaces 3.3.1 - PrimeFaces Extensions 0.5.1 - Apache Tomcat 7.0.29 - Hibernate 4.1.4-Final - MySQL 5.5

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests