Angular 8 Styles Broken

Arkadiusz Idzikowski staff commented 5 years ago

Could you add more details about the problems with current approach? It breaks things only if you use our components like this: <button class="btn btn-primary">Button</button instead of <button mdbBtn color="primary">Button</button. This is not recommended usage and we mentioned that in our migration guide: https://mdbootstrap.com/docs/angular/getting-started/migration/

We are using this approach because otherwise all the styles are loaded in the application, even if someone uses only few components.

josh.novak pro commented 5 years ago

That is the problem right there. Directives should not be used just for adding classes. Buttons for example are now harder to read and work differently than regular Bootstrap does, which is pointless. For eample if I want to add a custom class to a button it would have to be <button mdbBtn color="primary" class="btn-custom">Button</button , which makes it look like I only have one class on it. On top of that it's not just directives. If you want to use a navbar you need to use mdb-navbar or the styles aren't included, but I don't necessarily want all the extras that the component gives me, but I do want the styles to be correct. So this is my point. Styles shot NOT be included with the component or at the very least there should be a way to manually load them. As it is right now you are defeating the purpose of what styles accomplish and making it harder to use MDB for what it's supposed to be, which is a material version of bootstrap.

Arkadiusz Idzikowski staff commented 5 years ago

Thanks to this syntax you can update the color (or other variable) of the button dynamically by changing variables in your typescript file. The ability to update the application view without having to write additional logic is one of the reasons why programmers use javascript frameworks.

You still can use grid and utility classes because they are available globally. I'm not sure which part of mdb-navbar would you like to use, but if you think that something is not working correctly or need some feature that is not available, you can always create new topic with feature request/bug report.

We don't plan to change the way we load our styles because it is common practice in Angular UI kits and we think that it has many more advantages than disadvantages.

josh.novak pro commented 5 years ago

First of all, I don't know how many people you think really want to change the color of buttons dynamically, but that is not a huge priority for 90% of websites out there. Most of the time you are going to override the primary and secondary button colors for example, not add new ones. But that leads me to the biggest issue. Because you don't load the styles unless the element is present, it loads the styles last in the header. Guess what that does? It overrides the styles in our main stylesheet. That is obviously a huge issue and is a lot more important than it being slightly easier to switch button colors. Not to mention on top of all of this you guys are called MDB. Literally Material Design Bootstrap, but now bootstrap styles don't even work. So you are basically making yourself MDNB, Material Design Not Bootstrap. If you are going to add things to make development easier and blah blah blah. That's cool. But don't break what Bootstrap is and does.

josh.novak pro commented 5 years ago

Here's a good example that should make things more clear. If I use the tag <mdb-checkbox formControlName="all_program_access">All Program Access</mdb-checkbox> it generates the following code:

<mdb-checkbox _ngcontent-lna-c21="" formcontrolname="all_program_access" ng-reflect-name="all_program_access" class="ng-untouched ng-pristine ng-valid"><div class="form-check" ng-reflect-ng-class="[object Object]"><input class="form-check-input" type="checkbox" ng-reflect-klass="custom-control-input" ng-reflect-ng-class="[object Object]" id="mdb-checkbox-2" value="false" tabindex="0"><label class="form-check-label" ng-reflect-ng-class="[object Object]" for="mdb-checkbox-2">All Program Access</label></div></mdb-checkbox>

What if I want the label before the input? What if I want/need specific classes on the label or input? I can't use the mdb-checkbox component and now because of the changes you've made we cannot just make the code ourselves and use the form-check classes etc because they aren't included unless you use mdb-checkbox. Even if you try to override classes you'll have an issue since your styles for form-check etc are included last in the header it will override anything we put in the stylesheet unless we get super specific. Hopefully this makes more sense. Basically you just need to allow use to turn an option on that has all the style included still or let us include them manually and that should fix everything.

Arkadiusz Idzikowski staff commented 5 years ago

We are constantly working on improving the functionality of our components. We also want them to be easy to customize, that's why we often add inputs that allow to add custom classes and try to reduce the specificity of the css styles.

We understand that current approach is not perfect, but it's more angular-friendly and allow to reduce the bundle size and update the components options dynamically.

Thank you for the detailed example, I added tasks to our to-do list and we will improve mdb-checkbox component. If you encounter any further problems with our components, please let us know about that.

You can find information about component inputs, outputs and methods in API tab in the documentation (you need to switch tab at the top of the page). For example, it is possible to have label before input, just use [checkboxPosition]="'right'".

josh.novak pro commented 5 years ago

You missed the point completely. The point is including the styles at the bottom of the header overrides any styles in the main stylesheet. I'm also saying there is no way you could provide every possible choice of customization through the component, so you should allow us to include the stylesheets by hand or add an option to just include all the styles like the old version does. You seem to not understand that if you use the btn classes or any classes now without the component it just uses bootstrap's styles not yours. If you really wanted to save space you would make a custom stylesheet based on theirs and only include what's needed. Either way, you guys have ruined what made MDB good, so it's time to move on I guess.

backyardKiwi commented 4 years ago

I just ran into the exact problem josh.novak tried to explain to you guys and I'm going to follow his lead and stop using MDB Angular for that exact same reason - luckily I'm still early enough into my current project, so it won't be too much work, to remove MDB Angular and use something else that doesn't break Bootstrap or other good practices...

Like Josh said earlier, it doesn't make any sense to use Bootstrap and a MDB to "connect" it to Angular, if the end result is NOT being able to use Bootstrap as it is intended!

Arkadiusz Idzikowski staff commented 4 years ago

The solution used in this version allows you to load only those styles that are used in the current view of the application.

It is still possible to overwrite the component styles, you just need to use a slightly different approach. We prepared a customization guide for version 8 and later:

https://mdbootstrap.com/docs/angular/getting-started/styles-customization/

josh.novak pro commented 4 years ago

@Arkadiusz Idzikowski This doesn't help with the issue. You would either need to add !important or make your styles more nested than the MDB styles. It comes down to you shouldn't be importing styles after the styles file. They should be imported after bootstrap and before the styles file, so overriding is easy. I had so many issues between the styles and components just not working that I switched to ng-zorro.

backyardKiwi commented 4 years ago

Let's just give up on that one mate, they clearly don't wanna understand it ;-)

I'll have a closer look at ng-zorro - never heard of it before.