This is a migrated thread and some comments may be shown as answers.

Multiselect k-invalid-msg span alignment

3 Answers 233 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Scott Marx
Top achievements
Rank 1
Scott Marx asked on 24 Aug 2013, 09:23 PM
Why does the k-invalid-msg span on a multiselect validator not line up like on any other control?

Testing.html
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<div id="editform"></div>
<script>
var editWindow;
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: [{ name: "edit", text: "", click: showEdit }, { name: "destroy"}], title: "&nbsp;", width: "160px"}]
});
});
function showEdit(e) {
e.preventDefault();
editWindow = $("#editform")
.kendoWindow({
title: "Edit Test",
modal: true,
visible: false,
resizable: false,
width: 960,
content: { url: "EditTemplate.htm" }
}).data("kendoWindow");
$("#editform").closest(".k-window").css({
top: 10,
left: 10
});
editWindow.open();
}
</script>
<style scoped>
body
{
font-family: 'Century Gothic';
font-size: 11px;
}
</style>
</body>
</html>


EditTemplate.html

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div id="addRule-div">
<div>
<label for="LoanProduct" class="control-label">Loan Products:</label>
<div>
<select style="width:450px;" id="LoanProduct" name="LoanProduct" multiple="multiple" data-placeholder=" " required validationMessage="Loan Product required.">
<option>Test</option>
<option>Testing</option>
</select>
<span class="k-invalid-msg" data-for="LoanProduct"></span>
</div>
</div>
<div>
<label for="Title" class="control-label">Title:</label>
<div>
<input style="width:450px;" id="Title" name="Title" class="k-textbox" required validationMessage="Title is required." />
<span class="k-invalid-msg" data-for="Title"></span>
</div>
</div>
<div>
<div>
<button id="addRule-Button" class="k-button" type="submit">Add Rule</button>&nbsp;
</div>
</div>
</div>
</div>
<script>
$(function () {
$("#LoanProduct").kendoMultiSelect().data("kendoMultiSelect");
var validator = $("#addRule-div").kendoValidator().data("kendoValidator");
$("#addRule-Button").click(function () {
if (validator.validate()) {
console.log("validate");
}
});
});
</script>
</body>
</html>

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 26 Aug 2013, 09:55 AM
Hello Scott,

The MultiSelect is a block-level element, which causes any following content to fall on a new line.

You can use the following CSS rule to change the default behavior:

#addRule-div .k-multiselect
{
    display: inline-lock;
    vertical-align: top;
}


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott Marx
Top achievements
Rank 1
answered on 26 Aug 2013, 03:32 PM
Thank you for the quick post, but unfortunately that didn't work.
0
Dimo
Telerik team
answered on 28 Aug 2013, 10:52 AM
Hi Scott,

One letter is missing, sorry about that.

display: inline-block;

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MultiSelect
Asked by
Scott Marx
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Scott Marx
Top achievements
Rank 1
Share this question
or