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

Bootstrap-v4 Theme button issue

5 Answers 313 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 26 Oct 2018, 01:42 PM

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

Sort by
0
Tsvetina
Telerik team
answered on 30 Oct 2018, 11:10 AM
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="@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.
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
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.

0
Tsvetina
Telerik team
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.
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 06 Nov 2018, 01:33 PM

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.

0
Tsvetina
Telerik team
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.
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Tsvetina
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or