Primefaces: Spinner: width cannot be set properly via CSS

Created on 16 Feb 2016 · 4Comments · Source: primefaces/primefaces

Hi, the component has a uncomfortable behavior when it is being styled via CSS. For example a simple width attribute, causes the controls to grow, but not the inner tag accordingly.

<p:spinner id="basic" value="5445" style="width: 100%;"/>

I know there is also the size attribute, but this can't be used when i just want the component to "fill" something, as it doesn't support percentages. Hardcoded 'px' values cause the same behavior.

Just setting the inner width to the same value is also problematic as it isn't exactly the same width as the outer span. A (Javascript) workaround would be to get the spans width, subtract the 16px of the control anchor and all the other things causing it to grow more than needed (padding, margins etc). Using JS manually to style a jsf-component isnt really nice though.

Image of bug

Hope there will be a better way in future..

Expected

Image of bug

Regards

enhancement

Source

cnsgithub

👍3

Most helpful comment

Yes, using

with class="ui-fluid" solve this issue.
But this is a workaround that must be corrected !

schlebe on 4 Apr 2016

❤2 👍2

All 4 comments

I confirm this error that prohibit me to use this interesting widget !

I hope that this error communicated in February 2016 will be correctly very soon :-)

schlebe on 30 Mar 2016

Spinner component has responsive feature on 6.0, 5.2.4+ and 5.3.x. Please see; http://www.primefaces.org/showcase/ui/misc/responsive.xhtml

I think you can try the following sample code;

<div class="ui-fluid">
    <p:spinner id="basic" value="#{spinnerView.number1}" />
 </div>

<div class="ui-fluid">
    <p:panelGrid  layout="grid" styleClass="ui-panelgrid-blank" ...>
        <p:spinner id="basic" value="#{spinnerView.number1}" />
...

Screenshot;

mertsincan on 30 Mar 2016

👍2

Yes, using

with class="ui-fluid" solve this issue.
But this is a workaround that must be corrected !

schlebe on 4 Apr 2016

❤2 👍2

I agree, the idea of using jsf-components should be that they behave as expected ootb. If we have to start using plain HTML tags around them to fix things it makes the code ugly and one might ask why to use JSF at all if too often i have to write pure JSF / CSS HTML to fix things anyway. (Not just this issue, but the general concept of considering an issue fixed when there is a workaround seems to be very common)

cnsgithub on 4 Apr 2016

👍1

Was this page helpful?

0 / 5 - 0 ratings