Hello
I'm using kendoUI multiselect, but have some issues with the styling - The input field is smaller than the surrounding div causing it to look weird. Also the data-placeholder text is only shown partially until the first time the controle is clicked
I'm using FuelUx 2.3.0, Twitter Bootstrap 2.3.2, jQuery 1.10.2 and KendoUI v2013.2.716
Here is my source code using the MultiSelect:
And here is the generated Markup (taken from Firefox, firebug console)
I'm using kendoUI multiselect, but have some issues with the styling - The input field is smaller than the surrounding div causing it to look weird. Also the data-placeholder text is only shown partially until the first time the controle is clicked
I'm using FuelUx 2.3.0, Twitter Bootstrap 2.3.2, jQuery 1.10.2 and KendoUI v2013.2.716
Here is my source code using the MultiSelect:
01.
<!DOCTYPE html>
02.
<
html
lang
=
"en"
class
=
"fuelux"
>
03.
<
head
>
04.
<
meta
charset
=
"utf-8"
>
05.
<
script
src
=
'http://localhost/shared/assets/js/jquery-1.10.2.min.js'
type
=
'text/javascript'
></
script
>
06.
<
link
rel
=
'stylesheet'
type
=
'text/css'
href
=
'http://localhost/shared/assets/css/smoothness/jquery-ui-1.8.17.custom.css'
>
07.
<
script
src
=
'http://localhost/shared/assets/js/jquery-ui-1.9.1.custom.min.js'
type
=
'text/javascript'
></
script
>
08.
<
link
rel
=
'stylesheet'
type
=
'text/css'
href
=
'http://localhost/shared/assets/css/KendoUI/kendo.common.min.css'
>
09.
<
link
rel
=
'stylesheet'
type
=
'text/css'
href
=
'http://localhost/shared/assets/css/KendoUI/kendo.default.min.css'
>
10.
<
script
src
=
'http://localhost/shared/assets/js/KendoUI/src/kendo.web.js'
type
=
'text/javascript'
></
script
>
11.
<
script
src
=
"http://localhost/shared/assets/js/loader.js"
></
script
>
12.
<
link
href
=
"http://localhost/shared/assets/css/fuelux.css"
rel
=
"stylesheet"
>
13.
</
head
>
14.
<
body
>
15.
<
script
type
=
'text/javascript'
>
16.
var gVars = {};
17.
gVars.conf = {foo:'bar'};
18.
gVars.mainEventModel = {foo:'bar'};
19.
$(function(){
20.
gVars.objDetailsPage = new gVars.detailsPage(gVars.mainEventModel,1);
21.
gVars.objDetailsPage.selectArea();
22.
});
23.
</
script
>
24.
25.
<
script
type
=
"text/x-kendo-template"
id
=
"selectAreaTemplate"
>
26.
<
label
class
=
"control-label"
for
=
"treatedArea"
>Treated area:</
label
>
27.
<
div
class
=
"controls"
>
28.
<
input
id
=
"treatedArea"
style
=
"width:400px;height:50px;"
29.
data-role
=
"multiselect"
30.
data-auto-bind
=
"true"
31.
data-placeholder
=
"Click to select ..."
32.
data-text-field
=
"name"
33.
data-value-field
=
"value"
34.
data-source
=
"gVars.objDetailsPage.getEventParameterTypeDataSource(13)"
/>
35.
</
div
>
36.
</
script
>
37.
38.
<
script
type
=
'text/javascript'
>
39.
gVars.detailsPage = function(mainEventModel,treatmentTypeId) {
40.
this.treatmentTypeId = treatmentTypeId;
41.
this.mainEventModel = mainEventModel;
42.
this.eventParameterTypes = {
43.
overallResult : 1,
44.
treatment : 8,
45.
treatedArea : 13
46.
};
47.
};
48.
49.
gVars.detailsPage.prototype.getEventParameterTypeDataSource = function(eventParameterId) {
50.
var dataSrc = new kendo.data.DataSource({
51.
transport: {
52.
read: {
53.
url: gVars.conf.getParameterTypeData,
54.
dataType: "json",
55.
data : {
56.
eventParameterTypeId : eventParameterId
57.
}
58.
}
59.
}
60.
});
61.
return dataSrc;
62.
};
63.
64.
gVars.detailsPage.prototype.selectArea = function(){
65.
var diversForm = new kendo.View('selectAreaTemplate');
68.
var html = diversForm.render();
69.
$('#TemplateArea').html(html);
70.
};
79.
80.
</
script
>
81.
<
div
id
=
"TemplateArea"
></
div
>
82.
</
body
>
83.
</
html
>
01.
<
div
>
02.
<
label
class
=
"control-label"
for
=
"treatedArea"
>Treated area:</
label
>
03.
<
div
class
=
"controls"
>
04.
<
div
class
=
"k-widget k-multiselect k-header"
style
=
"width: 400px; height: 50px;"
>
05.
<
div
class
=
"k-multiselect-wrap k-floatwrap"
>
06.
<
ul
id
=
"treatedArea_taglist"
class
=
"k-reset"
unselectable
=
"on"
role
=
"listbox"
>
07.
<
input
class
=
"k-input"
style
=
"width: 25px"
accesskey
=
""
role
=
"listbox"
aria-expanded
=
"false"
tabindex
=
"0"
aria-owns
=
"treatedArea_taglist treatedArea_listbox"
aria-disabled
=
"false"
aria-readonly
=
"false"
aria-busy
=
"false"
>
08.
<
span
class
=
"k-icon k-loading k-loading-hidden"
></
span
>
09.
</
div
><
input
id
=
"treatedArea"
data-source
=
"gVars.objDetailsPage.getEventParameterTypeDataSource(gVars.objDetailsPage.eventParameterTypes.treatedArea)"
data-value-field
=
"value"
data-text-field
=
"name"
data-placeholder
=
"Click to select ..."
data-auto-bind
=
"true"
data-role
=
"multiselect"
style
=
"width: 400px; height: 50px; display: none;"
multiple
=
"multiple"
aria-disabled
=
"false"
aria-readonly
=
"false"
>
10.
<
option
value
=
"0"
>Boot top</
option
>
11.
<
option
value
=
"1"
>Upper verticals</
option
>
12.
<
option
value
=
"2"
>Lower verticals</
option
>
13.
<
option
value
=
"3"
>Entire verticals</
option
>
14.
<
option
value
=
"4"
>Flat bottom</
option
>
15.
<
option
value
=
"5"
>Entire hull</
option
>
16.
</
input
>
17.
<
span
style
=
"font-family: MS Shell Dlg; font-size: 13.3333px; font-stretch: normal; font-style:normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 16px; position: absolute; visibility: hidden;"
></
span
>
18.
</
div
>
19.
</
div
>
20.
</
div
>