Problem with padding of the input box

[flexiCodeParticipant]

Hello,
i’m using a number input like in the following fiddle: http://jsfiddle.net/yxcc86ae/

Unfortunately it seems that the padding of the input box (along with the width) is hard coded on the input tag. So it is not influenceable via style sheets. This looks very ugly when integrated in our page.

Is there any way to work around this issue?

Thanks in advance
flexiCode

[Peter StoevKeymaster]

Hi flexiCode,

Actually, the width is set by you to 25%. The padding is set through the stylesheet, the width is set by the use.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[flexiCodeParticipant]

Hi Peter,

I set the width of the whole control (the div element). This is working as expected.

What i meant in my first post (and what you can see in the fiddle) is the padding and width of the contained input element (without the spin buttons). The padding set in the style sheet is overridden by the input element. You can see that using the F12 tools of any browser on the fiddle. It sets the horizontal padding to 0.

Thanks
flexiCode

[Peter StoevKeymaster]

Hi flexiCode,

Your 25% value will always be taken into account so nothing is overriden. The width of the Input tag will be 25% – the width of the spin buttons. What actually are you trying to do? If you want to set the width, set it via the “width” property of the widget. If you want to set padding, then set it with CSS as we do in our stylesheets.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[flexiCodeParticipant]

Hi Peter,

i want to set the padding, so that the number in the input field is not squeezed to left side. But doing so by a style sheet (e.g. the .jqx-input-content class) has absolutely no effect.

I can see in the element inspector of the F12 tools that the style sheet is applied. But it is not active, because there is an explicit padding setting on the style attribute of the HTML <input> tag and thus overriding the setting in the style sheet.

Greetings
flexiCode

[Peter StoevKeymaster]

Hi flexiCode,

And that padding is applied in the stylesheet as well.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts