1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: How to include Bootstrap media breakpoint mixins?

Alex H. free asked 6 years ago

As in Bootstrap 4 the "hidden-" classes were removed (see here) they suggest using the "media-breakpoint-up/down/only" Sass mixins. The MDB Angular Bootstrap docs tells us that these classes are used, but not how to use them in our own code. So If I want to use e.g. "media-breakpoint-up()" Mixin, how do I include that? Just adding "@include media-breakpoint-up(sm) { }" into the main style.scss or a module's scss file does not resolve it (Error: "No mixin named media-breakpoint-up")   I'm using MDB Angular 4.3.7 with angular-cli. Thanks in advance! -Alex

Bartłomiej Malanowski staff commented 6 years ago

I'd like to take a look at your files. Please send me your project at b.malanowski@mdbootstrap.com

marts123 pro commented 6 years ago

I am also wondering what the solution is. I am having the same issue

marts123 pro commented 6 years ago

I had to change /node_modules/ng-mdb-pro/assets/scss/mdb/free/data/_variables-b4.scss due to the error Incompatible units: 'rem' and 'px'.

Benben pro commented 6 years ago

Same here. ERROR in ./src/app/root/components/sidebar/sidebar.component.scss Module build failed: @include media-breakpoint-only(xs) { ^ No mixin named media-breakpoint-only Backtrace: stdin:69 in /Users/work/Projects/LAP/src/app/root/components/sidebar/sidebar.component.scss (line 69, column 10)

Bartłomiej Malanowski staff commented 6 years ago

@Benben what's your version of MDB Angular?

ArekSalaso free answered 5 years ago

is this resolved? for angular project it is not possible to use mixins withins app scss main file. What's more - there is no possibility to add custom styles or create custom skins because all the files are in the node_modules so next update will probably destroy everything.

webteam@rbfcu.org free answered 6 years ago

Same here Module build failed: @include media-breakpoint-down(sm) { ... ^ Invalid CSS after "...oint-down(sm) {": expected "}", was "... }" in C:Repositoriesnbo-clientsrcappnavnav.component.scss (line 19, col umn 37) Error: @include media-breakpoint-down(sm) { ... } ^ Invalid CSS after "...oint-down(sm) {": expected "}", was "... }"

webteam@rbfcu.org free commented 6 years ago

Any update on this?

Alex H. free answered 6 years ago

Hi there, it's been a while and I upgraded to the most current version 5.2.2. Unfortunately the docs still say that responsive breakpoints should work with Sass mixins (https://mdbootstrap.com/angular/layout/bootstrap-layout/#responsive-breakpoints), but they still do not. Any fixes or workarounds for that besides manually defining the breakpoints? Thanks, Alex
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
Alex H.
10Support score
1Questions 1Answers 0Snippets