AM / PM spinner's text box cutting off text

[mattcashParticipant]

Hello,

We are using jqxdatetimeinput to allow the user to select a time for an appointment. We are noticing that the AM / PM text within the spinner’s text box is being cut off. The spinner’s text box itself is not being cut off, just the text within (text box is not big enough). This appears to happen with all of the standard / non-eccentric themes provided to us (i.e. Classic). This is happening across the standard web browsers (IE, Chrome, FireFox).

Is there anything we need to tweak to get around this behavior? (I apologize, but I cannot figure out how to attach an image of an example other than by providing a URL, which I cannot do).

We are currently using v 4.1.0.

Thanks!

[HristoParticipant]

Hello mattcash,

We test this example with latest version and looks work correctly.
Could you provide us example that demonstrate this issue? (if it is possible in https://www.jseditor.io/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[janetsParticipant]

Hello Support,

I am having the same issue, it appears to be a problem with bootstrap and the box_sizing.

http://jsfiddle.net/schmidtj/teLc74rf/

I have enhanced the demo to display the problem with the above fiddle. Please select the time button and you will see the box is cut off.

Please advise how to fix, I have tried overriding css but I can’t seem to fix it.

Thanks,

[HristoParticipant]

Hello janets,

Thank you for this feedback. We will investigate this scenario.
But if you remove bootstrap.min.css reference from the example everything looks ok.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[janetsParticipant]

Yes, but the project that I am using the DateTimePicker in is also using Bootstrap. So that is not an option in my the application that I am building.

Also, is there any notification on this forum when a reply is given to a post?

Thanks for looking at it.

[HristoParticipant]

Hello janets,

I would like to suggest you this approach (to change the size of the text):

.jqx-input {
  font-size: 90% !important;
}

Unfortunately, no such option for notification.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[janetsParticipant]

Thank you Hristo! I had found a more complicated css solution but I like yours much better!

Best!

Janet S.

[mattcashParticipant]

Hello,

I did not realize this question had been responded to. The solution you provided to janets does work for us. I have to thank janets as well for pointing me to the Bootstrap influence in this issue. We now understand why this is happening to us in the first place!

Thanks!

[Author]

Posts