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

Bootstrap-v4 Theme button issue

5 Answers 561 Views

Grid

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

AP asked on 26 Oct 2018, 01:42 PM

buttons.gif

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

answered on 30 Oct 2018, 11:10 AM

TelerikMvcApp42.zip

Hi AP,

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

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.

answered on 02 Nov 2018, 01:57 PM

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.

answered on 05 Nov 2018, 04:38 PM

Hello Andrew,

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

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.

answered on 06 Nov 2018, 01:33 PM

theme-test.zip

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.

answered on 08 Nov 2018, 09:37 AM

Hi Andrew,

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

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.