Textbox + validator are totally wonko

[Gabriel]

Is anyone expiencing the problem when using the Metro theme that textboxes seem to get some weird padded border. When adding an autocomplete, it gets even worse.

I'm not applying any CSS at all. The sample attached was a new site. The top image is when hovered over.

Here is the code:

<form id="frmSearch" method="get" action="@Href("~/collections/search")" class="btnSearch">

    <input id="txtSearch" type="text" name="q" placeholder="@defaultValue" class="k-textbox" style="width:40%;" required />

    <button class="k-button dark" id="btnSearch">

        search</button>

    </form>

Here is the JS:

// Search box.

    $("#txtSearch").kendoAutoComplete({

        change: onSearchClick,

        minLength: 3,

        dataTextField: "title",

        delay: 400,

        dataSource: new kendo.data.DataSource({

            type: "json",

            pageSize: 10, // Required to prevent caching.

            serverFiltering: true, // Required to prevent caching.

            serverPaging: true, // Required to prevent caching. 

            transport: {

                read: getRootDomain() + "/findTitles",

                parameterMap: function (options) {

                    return $.extend(options, {

                        title: $("#txtSearch").data("kendoAutoComplete").value()

                    });

                }

 

            }

        })

    });

    // Initialize and configure the input validator for the search box (on collection page).

    var validator = $("#frmSearch").kendoValidator({

        rules: {

            custom: function (input) {

                // Prevent anything under 3 characters from being allowed.

                return input.val().length > 2;

            }

        },

        messages: {

            custom: "You need 3 or more charactors",  // Shows when <3 character is entered.

            required: "Oops, you forgot me!" // Shows when the search box is left blank.

        }

    }).data("kendoValidator");

    $("#btnSearch").click(function () {

        if (validator.validate() == false) {

        }

    });

 
EDIT: also the documentation for the validator regarding the SPAN tag to fix alignment does not work in the above situation.
The attached image icon on this post says it is a GIF when it is a PNG

[Gabriel]

Okay, I've made a light improvement by:

border:0;

border-width:0;

padding:0;

But it is still slightly out as you can see by the attached image. The top image is what is happening when an autocomple is added, the bottom with it removed. Notice too how it ignores the sizing imposed on it?

Also, is it possible to make the width of the dropdown list longer?

[Gabriel]

Fixed - Kendo ignores any font styles you have applied. You need to re-specify it for the input box with the autocomplete applied.