This is a migrated thread and some comments may be shown as answers.
Textbox + validator are totally wonko
2 Answers 76 Views
This is a migrated thread and some comments may be shown as answers.
Gabriel
Top achievements
Rank 1
Gabriel asked on 01 Feb 2012, 01:33 AM

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

2 Answers, 1 is accepted

Sort by
0
Gabriel
Top achievements
Rank 1
answered on 22 Feb 2012, 04:05 AM
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?
0
Gabriel
Top achievements
Rank 1
answered on 29 Feb 2012, 03:55 AM
Fixed - Kendo ignores any font styles you have applied. You need to re-specify it for the input box with the autocomplete applied.
Asked by
Gabriel
Top achievements
Rank 1
Answers by
Gabriel
Top achievements
Rank 1
Share this question
or