In kendo multiselect dropdown,the problem we were facing is -if we add a very big new skill which cannot be selected from existing,the kendo goes on increasing its width and also on adding a small new skill, the cursor goes the next line.Let me know your solution to the above problem.To solve this issue, we added a class kendo-width to the bootstrap div class col-xs-12 col-sm-6 col-md-6 col-lg-6 (see the image) and we get the kendo width on page load and resize and apply that value to the class -k-multiselect-wrap k-floatwrap so that the top problem can be solved.code- $( window ).on("load resize",function() {
var kendoWidthResize = $(".kendo-width").width() -6;
$(".customize-kendo .k-multiselect-wrap.k-floatwrap").css("width", kendoWidthResize);
});
On resize we are getting the correct width but on load the width is not applied to the .k-multiselect-wrap class and the kendo looks like a small textbox(see image).How to solve this issue?
var kendoWidthResize = $(".kendo-width").width() -6;
$(".customize-kendo .k-multiselect-wrap.k-floatwrap").css("width", kendoWidthResize);
});
On resize we are getting the correct width but on load the width is not applied to the .k-multiselect-wrap class and the kendo looks like a small textbox(see image).How to solve this issue?
1 Answer, 1 is accepted
0
Hello Pavan,
From the provided screenshot I noticed that you are using Bootstrap 3 along with Kendo UI. In order to successfully achieve the integration of both frameworks in a project, please follow the steps described in the following article:
Important to note is that Kendo UI uses the default content-box box model (box-sizing CSS property), while Bootstrap uses the non-default border-box model and applies it to all elements on the page, including the ones that are unrelated to Bootstrap. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap grid layout. To fix this, a simple CSS patch needs to be included in the layout of the application as described in the following section of the above-linked documentation:
Could you try configuring the application stylesheet references according to the above, remove the additional resizing logic, apply the Bootstrap box-sizing fix, and then test the MultiSelect widget? Let me know if this resolves the issue.
Regards,
Dimitar
Progress Telerik
From the provided screenshot I noticed that you are using Bootstrap 3 along with Kendo UI. In order to successfully achieve the integration of both frameworks in a project, please follow the steps described in the following article:
Important to note is that Kendo UI uses the default content-box box model (box-sizing CSS property), while Bootstrap uses the non-default border-box model and applies it to all elements on the page, including the ones that are unrelated to Bootstrap. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap grid layout. To fix this, a simple CSS patch needs to be included in the layout of the application as described in the following section of the above-linked documentation:
Could you try configuring the application stylesheet references according to the above, remove the additional resizing logic, apply the Bootstrap box-sizing fix, and then test the MultiSelect widget? Let me know if this resolves the issue.
Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.