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

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

6 Answers 144 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
BitShift
Top achievements
Rank 1
Veteran
BitShift asked on 13 Jul 2018, 02:17 PM

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

 

 

6 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 17 Jul 2018, 10:54 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 12 Jun 2021, 04:26 AM

I'm also facing similar issue with Angular 12.
Dimiter Topalov
Telerik team
commented on 15 Jun 2021, 07:23 AM

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.

0
BitShift
Top achievements
Rank 1
Veteran
answered on 19 Jul 2018, 12:52 PM

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"
              }

0
BitShift
Top achievements
Rank 1
Veteran
answered on 19 Jul 2018, 01:07 PM

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.

0
Accepted
Dimiter Topalov
Telerik team
answered on 19 Jul 2018, 01:24 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
BitShift
Top achievements
Rank 1
Veteran
answered on 19 Jul 2018, 01:29 PM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 22 Jul 2021, 01:27 PM

Hi, Could you upgrade this sample for Angular12. Regards
0
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 23 Jul 2021, 11:19 AM

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";

Tags
General Discussions
Asked by
BitShift
Top achievements
Rank 1
Veteran
Answers by
Dimiter Topalov
Telerik team
BitShift
Top achievements
Rank 1
Veteran
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or