I have a site, using the bootstrap-v4 theme (version 2018.3.1017), along with bootstrap version 4.1.3.
When showing the Edit and Delete buttons on a grid, there is no spacing between them (Image attached). If I include the kendo.common.css file, button spacing is corrected, but the pop-up editor window then shows a vertical scroll bar, and the close button is outside of the window.
The css files that are included in the site are:-
- bootstrap.css
- font awesome/all.css
- site.css (default MVC starting css file)
- kendo.bootstrap-v4.min.css
What do I need to add / alter to correct the button spacing issue?
Thanks
5 Answers, 1 is accepted
I tried the combination of the files that you listed but the Grid buttons appear as expected in my test project. You can find it attached to this post. My <head> tag looks like this:
<head> <title>@ViewBag.Title - My Telerik MVC Application</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="" crossorigin="anonymous"> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <link href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" /> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.aspnetmvc.min.js"></script> <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script></head>Could you tell if anything is missing in my test scenario? If the problem persists on your side, can you tell what changes I need in my example to reproduce it, too?
Regards,
Tsvetina
Progress Telerik
Rank 1
Iron
Iron
Veteran
Thanks for looking into this. Your <head> looks a lot like mine.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page - My ASP.NET Application</title> <link href="/Content/Bootstrap4/bootstrap.min.css" rel="stylesheet"/><link href="/Content/FontAwesome/css/all.css" rel="stylesheet"/><link href="/Content/site.css" rel="stylesheet"/> <link href="/Content/Kendo/kendo.bootstrap-v4.min.css" rel="stylesheet"/> <script src="/Scripts/modernizr-2.8.3.js"></script> <script src="/Scripts/jquery-3.3.1.js"></script> <script src="/Scripts/Bootstrap4/bootstrap.bundle.js"></script> <script src="/Scripts/Kendo/kendo.all.min.js"></script><script src="/Scripts/Kendo/jszip.min.js"></script><script src="/Scripts/Kendo/kendo.aspnetmvc.min.js"></script><script src="/Scripts/Kendo/cultures/kendo.culture.en-GB.min.js"></script> </head>
Changing to the bootstrap theme, and everything works - however using the new v4 theme loses button spacing, and I'm getting screen 'judder' on my home page, when I hover into buttons I have at the top of the page (using the bootstrap btn class), which have bootstrap tooltips attached.
Strangely this only happens on the home page, and not my more complicated data form page.
We would need to reproduce the problem to tell what is causing it. Maybe with the custom code that you have in the problematic (home) view, we will be able to reproduce it.
So, if sending the full project is not possible, could you send us your home page? Maybe there is something specific in it this view that causes the issue. If the code cannot be shared in public, you can open a support ticket and attach the view there. Also, a live URL would help if such can be provided, as it will allow us to inspect the styles that are applied to the buttons at runtime.
Regards,
Tsvetina
Progress Telerik
Rank 1
Iron
Iron
Veteran
Tsvetina,
Unfortunately its a project for a secure intranet, so I can't point you to a URL, and the project is now a bit big to upload. Instead, I've created a sample project, that replicates the grid button issue. Its just a new MVC project, with Kendo v2018.3.1017 added (minus the fonts folder, and the images to keep the zip file size down).
Hopefully this will let you replicate my problem.
Thank you for the project, I did reproduce the issue using it. It is actually related to differences that you and I have in the Grid configuration, not the references. The problem is only reproducible when scrolling is disabled in the Grid (default behavior) but I was testing with the Grid project template where scrolling is explicitly enabled.
We logged the issue and you can follow its status here:
Grid command buttons have no right/left margin when scrolling is disabled
This being said, the possible workarounds are:
- To enable scrolling.
- To use a custom style that applies the needed margin:
<style>.k-grid tbody .k-button {margin:0.16em;}</style>
Here is a client-side example using the above style:
https://dojo.telerik.com/USOPOgEQ
Regards,
Tsvetina
Progress Telerik