Need working sample - Kendo with Angular 6 + Bootstrap 4.x

[BitShift]

Id like to see a working Angular 6 sample (complete with angular.json settings) with Kendo componets along with the bootstrap theme, while also using bootstrap to handle normal html components.

Seems like im getting some conflict between the bootstrap theme and the bootstrap styles (from bootstrap css). Not sure if things are getting set correctly, or something else.  See previous thread on conflicts between with/without bootstrap css and kendo bootstrap theme

 

 

[Dimiter Topalov]

Hi Randal,

I created a new sample Angular 6 application with Bootstrap and Kendo-Theme-Bootstrap (find attached - run npm install as the node_modules folder was removed to reduce archive size).

Bootstrap 4 was installed via NPM (alongside the necessary JavaScript libraries for its components), the Kendo theme and DropDowns package is installed and included as described in the documentation.

Both Bootstrap and kendo-theme-bootstrap CSS files are imported in the styles.scss file:



For IE support, uncomment the respective line in the browserlist file:



I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Srinivas]

I'm also facing similar issue with Angular 12.

[Dimiter Topalov]

Hello Srinivas,

As this thread is related to a configuration involving loading the Kendo theme and other style sheets in an Angular 6 application, and the Kendo themes and their respective building mechanism evolved through the past couple of years, please make sure that you are following the process for loading and/or customizing the themes, described in our documenation:

https://www.telerik.com/kendo-angular-ui/components/styling/

https://www.telerik.com/kendo-angular-ui/components/styling/custom-themes/

https://www.telerik.com/kendo-angular-ui/components/styling/variables/

If the issue persists, please open a separate support thread (a private ticked or public forum thread) describing the observed problems in  further details, as it does not seem directly related to the initial topic of the thread (setting up an Angular 6 application with rather outdated Kendo theme and packages). Attaching an isolated runnable project where the used setup/configuration, and the issue in question can be observed, will help us inspect the case further, and try to provide a solution best suitable to the specific use case. Thank you in advance.

[BitShift]

I noticed in the example, within angular.json the default theme was imported as well?  Is that needed regardless?

              {              
                "input": "node_modules/@progress/kendo-theme-default/scss/all.scss"
              }

[BitShift]

Thank you.  Only real difference I see is Im using Angular 6.07 and your example is 6.03. 

The example rendered exactly like its supposed to.  Not mine however.  I opened a ticket and uploaded a zipped folder of the source im using.

[Dimiter Topalov]

Hello Randal,

Regarding the duplicate inclusion of the theme - including the default theme in the angular.json file is not required, but is rather performed automatically when using the new "ng add @progress/--package-name--" syntax for installing Kendo UI for Angular packages. We will make sure to document this behavior in the installation section of the Styling and Themes documentation page. You can safely remove the respective lines from the angular.json file.

As for the observed discrepancies between your application and the sample one, we will inspect the mentioned archive and follow up in the respective thread.

Regards,
Dimiter Topalov
Progress Telerik

[BitShift]

Thanks Dimiter.  The example helped me confirm im not missing anything obvious.  However, in the ticket I opened, and for anyone else having similar issues, I think there might be some conflict between bootstrap styling and the kendo bootstrap styling, or quite possibly im doing something wrong. 

 

[bahaso]

Hi, Could you upgrade this sample for Angular12. Regards

[Srinivas]

I got solved by movie the imports to bottom as following:

@font-face {
  font-family: OpenSans;
  src: url(assets/fonts/OpenSans-Regular.ttf) format("truetype");
}

$primary: red;
$font-style-family: OpenSans;
$base-theme: Bootstrap;
$skin-name: all;
$swatch-name: Bootstrap;
$border-radius: 0.25rem;
$accent: #695ed6;
$secondary: #e4e7eb;
$info: #17a2b8;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;
$body-bg: #ffffff;
$body-color: #292b2c;
$component-bg: #ffffff;
$component-color: #292b2c;
$card-cap-bg: #f7f7f9;
$card-cap-color: #292b2c;
$series-a: #0275d8;
$series-b: #5bc0de;
$series-c: #5cb85c;
$series-d: #f0ad4e;
$series-e: #e67d4a;
$series-f: #d9534f;
@import "~@progress/kendo-theme-bootstrap/dist/all.scss";
@import "~bootstrap/dist/css/bootstrap.css";