MultiSelect styling problems

1 Answer 4287 Views

MultiSelect

Jeppe asked on 04 Sep 2013, 01:54 PM

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:

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>

And here is the generated Markup (taken from Firefox, firebug console)

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>

1 Answer, 1 is accepted

answered on 06 Sep 2013, 12:29 PM

Hi Jeppe,

By design the select element from which the MultiSelect is initialized is wrapped into a <div> element (this can be observed in the rendered HTML elements). Hence in order to achieve the expected outcome you should set height to the .k-multiselect-wrap element (not to the <select> itself):

<style>

.k-multiselect-wrap{

height: 50px;

}

</style>

On a side note, keep in mind that:

The MultiSelect widget should be initialized from <select> element (documentation link);
Kendo UI v2013.2.716 requires jQuery 1.9.1 (documentation topic).

Regards,
Iliana Nikolova
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Jeppe

commented on 09 Sep 2013, 07:04 AM

Hello Iliana

Thanks for the response - it made me look in the right direction.

I found that FuelUx was using a margin-top 10px; on <ul> elements, this was causing the problems.

The solution was to add this style:
/* CSS hack to make KendoUI multiselect look proberly while using FuelUx */
.fuelux ul {
margin: 0 0 0px;
}

The other primary problem was with the width of the element containing the placeholder text (in my case "Click to select...")

Initially it was set to 25px, for some reason. I fixed that by doing the following:

var multiselect = $("#treatedArea").data('kendoMultiSelect');
multiselect.input.css('width','119px');

With that done my Multiselect works like a charm :-) Now for some browser test and task completed - next one comming up ;-)

Smita

commented on 04 Nov 2019, 06:56 AM

Tank You Jeppe,

I want to change background color and color property of kendoMultiSelect dropdown.

first I tried as

var currentElement = $("dropDownList").data("kendoDropDownList");

currentElement.span.css("background-color", BackgroundColor);

It gives exception as

Unable to get property 'css' of undefined or null reference

So, I used the statement

var currentElement = $("dropDownList").data("kendoDropDownList");

currentElement.input.css("background-color", BackgroundColor);
currentElement.input.css("color", TextColor);

Now it works.