jqxInput width always has 8px more automatically. (width:200 -> 208px)

[klien54Participant]

Hello Team,

jqxInput width api always add 8px more because of 6px padding and 2px border.
For example, if width is set by 200, it shows 200px inner area, padding-left 3px, padding-right 3px, border-left 1px and border-right 1px, so it turns out to be 208px total.
Even the width ‘100%’ is always over the parent area with 8px more in the same reason.
Please take a look at this sample below.

http://jsfiddle.net/klien54/s8528u1b/

I need to calculate 8px less for the right width always.
Even if I remove the 6px padding from css, 2px border is still necessary.
Would you let me know how to have the same width from width api without considering these calculation?

Thanks in advance for your help as always.

Best Regards,
klien54

[ChristopherParticipant]

Hi klien54,

the jqxInput has default css styling which can be changed trough the javascript code or the stylesheet file. To solve your issue, you just need to add the proeprty “box-sizing: border-box” to the “input” element and it will format just the way you want to. The reason for the problem is that you apply the border on the parent div not the element itself. Here is the example you sent with my modification:
https://www.jseditor.io/?key=1f2b9ac609b211e5b1c780ee734cf820

Also if you want to reduce the size of the border, use “border-with”, if you want to remove it use “border: “none”. You must apply these properties to the div, that has the border set.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[klien54Participant]

Hi Christopher,

Thank you for your prompt answer.
But the link you put on is not for a jqxInput example but for a jqxButton’s.
I guess the url is wrong 😉

By the way, what I pointed out in my example is that if the parent div width is 200px,
the child element, an input with width:100%, should be 200px not 208px. (talking about red dotted example in my sample)
In my expectation, no matter how the padding and border sizes are, the input width should be eventually same as the width property’s value which a user put in.

In Short, my question is why the jqxInput has 8px width more eventually unlike what other widgets do such as a jqxComboBox, jqxDropDownlist, and so on.

Best Regards,
klien54

[ChristopherParticipant]

Hi klien54,

you are right. Excuse me for the wrong link. Here is the correct one:
https://www.jseditor.io/?key=jqwidgets
It should clear things up. The reason for the 208px width is because of the styles that are added to the widget when it’s created. If you remove them it will be exactly 200px. The “box-sizing” property will fix your problem as i already mentioned.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[klien54Participant]

Hi Christopher,

thank you for the kind instruction with a sample.
It is really helpful for handling our issue.

Warm Regards,
klien54

[Author]

Posts