Bootstrap theme is missing many styling options for Dialogs

[James]

I am using the bootstrap theme and the Dialog component is not displaying correctly.  After further investigation I found that the bootstrap theme CSS file is missing many of the .k-dialog styles.  For comparison, the default theme has 22 .k-dialog styles and the bootstrap theme only has 15.  The noticeable exclusions are the styles for the button groups and the title bar.  I am currently using the latest version of the BS Theme (2.14.0).  I attached an image of what I see.

 

I am going to just copy over the missing styles from the default theme but this is definitely not ideal as the color schemes are different so I'll have to figure that out as I go.

[James]

Also to add to this, I am using the exact code from the demo page

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

 

It appears the buttons that are being generated from the code are not using the correct styles

In the demo the buttons look like this

<button kendobutton="" class="k-button ng-star-inserted" dir="ltr">No</button>

but using the same code in my app generates buttons like this

<button _ngcontent-c3="" kendobutton="" class="ng-star-inserted">No</button>

 

The big thing is in the class declaration it is missing the k-button attribute which is causing the button style issues.  I am using the latest angular-dialog and angular-button package

[Dimiter Topalov]

Hi James,

Indeed, the provided screenshot and information suggest that the Bootstrap theme styling is not applied as expected. Can you please make sure that you are indeed using the latest versions of all our packages (sometimes older versions specified in the package-lock.json file or the NPM cache prevent from installing the latest versions)?

Another possible cause is the following issue (more specifically - importing specific SCSS files only and missing other imports they rely on):

https://github.com/telerik/kendo-themes/issues/261

I also prepared two examples demonstrating that both the buttons and the Dialog are styled as expected when the Bootstrap theme is used:

https://stackblitz.com/edit/angular-syuuqf-dh7ngy?file=app/app.component.ts

https://stackblitz.com/edit/angular-jkdokz?file=app%2Fapp.component.ts

Please make sure that all dependencies are installed and imported as well as that the IE browser is enabled in the browserlist configuration (if there is an issue with certain styles in IE).

If the issue persists, we will need a similar isolated runnable project where it can be observed so we can inspect it further, and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[James]

I was able to resolve the button issue by adding the "ButtonsModule" to the app.module file.  I would say that either the documentation needs to be clearer about this or there is an issue with the "ng add @progress/kendo-angular-dialog" command.  The Dialog install instructions imply that this will install and add everything you need to get Dialogs working but it doesn't as there are additional steps  needed afterwards.

[Dimiter Topalov]

Hello James,

Thank you for the feedback. I am glad that you were able to resolve the discussed issue.

Indeed, the ButtonsModule is not automatically added to the module imports because not all scenarios and use cases for the Dialog involve having Action Buttons, and we avoid to impose imports that may increase the bundle size of customers' applications where this is not absolutely necessary.

Your comments about that one would expect the necessary imports to be performed are also valid, and this is why we will make sure to updated our documentation to explicitly specify that when the Dialog has to have Action buttons, the ButtonsModule should be imported too.

Regards,
Dimiter Topalov
Progress Telerik