Calendar button shows on the next line when knockout binding applies

[ptssiMember]

I try to use jqxDateTimeInput with knockoutjs like below, but in this case calendar button is always displayed one line below.
HTML code is:

From Chome’s element inspector, I found that generated HTML requies one more pixel than the width I specified. So, when 100 is given, jqx generated HTML requires 101. I think this cause calendar button shows one line below.

23

Is this a known problem? How can I fix this?
Thanks for your advice in advance.

[ptssiMember]

I reload HTML codes.

HTML code I used:

<div data-bind="jqxDateTimeInput: { value: InvDate, width: 100, height: 22, formatString: 'MM/dd/yyyy', animationType: 'none' }"></div>

jqxDateTimeInput generated:

<div id="doe" data-bind="jqxDateTimeInput: { value: ExportDate, width: '100px', height: '22px', culture: 'en-US' }"
        data-role="input" role="dateTimeInput" style="width: 100px; height: 22px;" class="jqx-widget"
        aria-valuenow="Thu Apr 18 2013 00:00:00 GMT+0900 (Korea Standard Time)" aria-valuetext="18/04/2013"
        aria-valuemin="Mon Jan 01 1900 00:00:00 GMT+0900 (Korea Standard Time)" aria-valuemax="Fri Jan 01 2100 00:00:00 GMT+0900 (Korea Standard Time)"
        aria-disabled="false">
        <div style="overflow: hidden; border: 0px;">
            <div id="dateTimeWrapper" style="float: none; position: relative; width: 100%; height: 100%;">
                <div id="dateTimeContentdateTimeInput9906384857394733000" style="position: relative;
                    overflow: hidden; float: left; height: 20px; left: 0px; top: 0px; width: 79px;"
                    class="jqx-input jqx-widget-content jqx-rc-all">
                    <input autocomplete="off" style="position: relative; border: none; margin: 0px; padding: 0px;
                        width: 76px; left: 0px; top: 0px; text-align: left; height: 20px;" id="inputdoe"
                        class="jqx-input-content jqx-widget-content" type="textarea" name="doe">
                </div>
                <div id="dateTimeButtondateTimeInput99048005090607330000" style="position: relative;
                    float: right; top: 2px;">
                    <div style="padding: 0px; margin: 0px; top: 0px; font-size: 3px; position: relative;
                        width: 18px; display: block;" class="jqx-input-button-header jqx-widget-header">
                        <div style="position: relative; font-size: 3px; left: 9px;" class="jqx-input-button-innerheader jqx-input-button-innerHeader">
                        </div>
                    </div>
                    <div style="padding: 0px; margin: 0px; top: 0px; position: relative; height: 15px;
                        width: 18px; display: block;" class="jqx-input-button-content jqx-widget-content">
                        <div style="line-height: 16px; background: transparent; margin: 0; border: 0; padding: 0px;
                            text-align: center; vertical-align: middle;"><b style="border: 0; padding: 0px; margin: 0px;
                                background: transparent;">23</b></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

[Peter StoevKeymaster]

Hi ptssi,

We are unable to reproduce the reported behavior. We will continue testing and in case we reproduce it, we will add a work item.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts