Having Problems sizing the kendoNumericTextBox

[George]

Hi, 

Having problems getting the spinner portion of the kendoNumericTextBox to show up when width is les than 140px. 150pxs is ok, but at 140px it does not move over to the left it starts getting partially hidden:

I am using Kendo version: 2023.3.1010. Is there a work around so the spinner buttons appear when less than 140 pixels in width? Moving up to a different version at this time is not an option unfortunately.

                <table id="date-picker-table">
                    <tbody>

                        <tr>
                            <td class="date-cell" style="width:16%">
                                <label for="startDate">Start Date:</label>
                                <input id="startDate" style="width:180px" />
                            </td>
                            <td class="date-cell" style="width:19%">
                                <label for="numb-days">Number of Days:</label>
                                <input id="num-days" style="width:140px" />
                            </td>
                            <td class="date-cell">
                                <label for="endDate">End Date:</label>
                                <input id="endDate" style="width:180px" />
                            </td>
                        </tr>
                    </tbody>
                </table>

Here is the initialization of the control in JavaScript:

    $("#num-days").kendoNumericTextBox({

        min: 0,             // Minimum value
        max: 9999,          // Maximum value (4 digits)
        decimals: 0,        // Restrict to integers (no decimals)
        format: "n0",       // Display format for integers
        restrictDecimals: true // Prevent decimal input
    });

Any work around or quick patch would be awesome.

 

Regards,

George

 

[George]

P.S:

I tried mucking with the CSS and adding some

.k-numeric-wrap {
    width: 100px; /* Desired control width */
    padding: 0 24px; /* Adjust for spinner buttons */
}
.k-select {
    width: 24px; /* Allocate fixed width for spinner buttons */
    visibility: visible; /* Ensure they're not clipped or hidden */
}

JavaScript :

var numeric = $("#num-days").kendoNumericTextBox({
    min: 0,
    max: 9999,
    decimals: 0,
    format: "n0",
    restrictDecimals: true
}).data("kendoNumericTextBox");

numeric.wrapper.find(".k-numeric-wrap")
    .css({
        width: "100px",
        paddingRight: "24px" // Ensure space for spinners
    })
    .find(".k-select")
    .css({
        visibility: "visible",
        width: "24px"
    });

This approach did not help at all :(

Thanks in advance,
George

[Neli]

Hi George,

I tried to replicate the issue but to no avail. Could you please take a look at the Dojo example linked here and let me know how the appearance the way it is on your side can be replicated: https://dojo.telerik.com/rYJdAyGt

Looking forward to your reply.

Regards,

Neli