Animations on Custom version of MDB UI KIT dont work


Topic: Animations on Custom version of MDB UI KIT dont work

demzl25 premium asked 2 months ago

Hi,

*_Expected behavior_*

I have customized MDB UI KIT with only js and css moduls that I need. Animations should work because i have add them to my UI KIT. When I leave full library of MDB UI KIT everthing is working properly. I'm not sure what is wrong.Here is link to the example of working animations: https://mdbootstrap.com/snippets/standard/demzl25/3983042#css-tab-view

*_Actual behavior_*

In my section header and paragraph zoomin animation and font styling strangely doesn't work.

Resources (screenshots, code snippets etc.)

mdb.free.scss:

// CORE FUNCTIONS

@import './bootstrap-rtl-fix/functions';

@import './free/functions';

// CORE VARIABLES

@import './custom/variables';

@import './free/variables';

@import './bootstrap-rtl-fix/variables';

// BOOTSTRAP CORE

@import './bootstrap-rtl-fix/mixins'; @import './bootstrap-rtl-fix/utilities';

// BOOTSTRAP CORE COMPONENTS

@import './bootstrap-rtl-fix/root';

@import './bootstrap-rtl-fix/reboot';

@import './bootstrap-rtl-fix/type';

@import './bootstrap-rtl-fix/images';

@import './bootstrap-rtl-fix/containers';

@import './bootstrap-rtl-fix/grid';

// BOOTSTRAP COMPONENTS

@import './bootstrap-rtl-fix/tables';

@import './bootstrap-rtl-fix/forms';

@import './bootstrap-rtl-fix/buttons';

@import './bootstrap-rtl-fix/transitions';

@import './bootstrap-rtl-fix/dropdown';

@import './bootstrap-rtl-fix/button-group';

@import './bootstrap-rtl-fix/nav';

@import './bootstrap-rtl-fix/navbar';

@import './bootstrap-rtl-fix/card';

@import './bootstrap-rtl-fix/pagination';

@import './bootstrap-rtl-fix/alert';

@import './bootstrap-rtl-fix/accordion';

@import './bootstrap-rtl-fix/placeholders';

@import './bootstrap-rtl-fix/list-group';

@import './bootstrap-rtl-fix/close';

@import './bootstrap-rtl-fix/toasts';

@import './bootstrap-rtl-fix/modal';

@import './bootstrap-rtl-fix/popover';

@import './bootstrap-rtl-fix/carousel';

// Helpers

@import './bootstrap-rtl-fix/helpers';

// Utilities

@import './free/utilities';

@import './bootstrap-rtl-fix/utilities/api';

// MDB CORE

@import './free/mixins';

@import './free/utilities';

// MDB CORE COMPONENTS

@import './free/root';

@import './free/reboot';

@import './free/type';

@import './free/colors';

@import './free/shadows';

@import './free/flag';

@import './free/images';

// MDB FORMS

@import './free/forms/form-control';

@import './free/forms/form-select';

@import './free/forms/form-check';

@import './free/forms/validation';

// MDB COMPONENTS

@import './free/tables';

@import './free/buttons';

@import './free/deprecated';

@import './free/dropdown';

@import './free/button-group';

@import './free/nav';

@import './free/navbar';

@import './free/card';

@import './free/pagination';

@import './free/alert';

@import './free/list-group';

@import './free/close';

@import './free/modal';

@import './free/toasts';

@import './free/ripple';

@import './free/range';

@import './free/accordion';

@import './free/carousel';

mdb.pro.scss:

// MDB FREE

@import './mdb.free.scss';

// MDB PRO

@import './pro/variables';

@import './pro/modal';

@import './pro/perfect-scrollbar';

@import './pro/animate';

@import './pro/navbar';

@import './pro/datatable';

@import './pro/sticky';

@import './pro/select';

@import './pro/autocomplete';

@import './pro/theme/theming';

mdb.free.js:

// BOOTSTRAP CORE COMPONENTS

import Button from './free/button';

import Collapse from './bootstrap/mdb-prefix/collapse';

import Offcanvas from './bootstrap/mdb-prefix/offcanvas';

import Alert from './free/alert';

import Carousel from './free/carousel';

import Modal from './free/modal';

import Popover from './free/popover';

import ScrollSpy from './free/scrollspy';

import Tab from './free/tab';

import Tooltip from './free/tooltip';

import Toast from './free/toast';

// MDB FREE COMPONENTS

import Input from './free/input';

import Dropdown from './free/dropdown';

import Ripple from './free/ripple';

export { Alert,

Button,

Carousel,

Collapse,

Dropdown,

Input,

Modal,

Ripple,

Tab,

Toast,

};

mdb.pro.js

// BOOTSTRAP CORE COMPONENTS

import Button from './free/button';

import Collapse from './bootstrap/mdb-prefix/collapse';

import Offcanvas from './bootstrap/mdb-prefix/offcanvas';

import Carousel from './free/carousel';

import Popover from './free/popover';

import ScrollSpy from './free/scrollspy';

import Tab from './free/tab';

import Tooltip from './free/tooltip';

// MDB FREE COMPONENTS

import Input from './free/input';

import Dropdown from './free/dropdown';

import Ripple from './free/ripple';

// MDB PRO COMPONENTS

import Animate from './pro/animate';

import Alert from './pro/alert';

import Toast from './pro/toast';

import Navbar from './pro/navbar';

import LazyLoad from './pro/lazy-load';

import Datatable from './pro/datatable';

import Sticky from './pro/sticky';

import Select from './pro/select';

import Touch from './pro/touch';

import SmoothScroll from './pro/smooth-scroll';

import PerfectScrollbar from './pro/perfect-scrollbar';

import Autocomplete from './pro/autocomplete';

import Modal from './pro/modal';

export {

// FREE

Button,

Carousel,

Collapse,

Dropdown,

Input,

Modal,

Ripple,

Tab,

// PRO

Alert,

Animate,

Datatable,

Navbar,

SmoothScroll,

Toast,

LazyLoad,

Sticky,

Select,

Touch,

PerfectScrollbar,

Autocomplete,

};

Thanks,

Damjan


Grzegorz Bujański staff commented 2 months ago

Unfortunately, I had to remove the link to the project because it contained the source code of our pro components

Looks like pro components are missing in your bundle files. How did you create the custom version of MDB? Are you sure that the contents of the mdb.pro.js file were included there?


demzl25 premium commented 2 months ago

Thanks,

I m sory for that, I have forget about source files.

I have use mdb-webpack-starter to create custom ui kit and follow the steps in Mdb docs. Yes Im sure that all source files are in there.

  1. I have download MDB5 files from my account and put mdb free and pro js source files in src/js/index.js and remove the lines of modules that I will not use and update the paths.

  2. I have put mdb free and pro scss source files into src/scss/index.scss and remove the lines of modules that I will not use and update the paths.

  3. I have run terminal in VCS with command npm install.

  4. I have run npm run startMDB.

  5. I have open new terminal window and run command npm run buildMDB.

I have no errors everything is fine.

When I leave full library of MDB UI KIT in the project files everything is working properly and when I put this Mdbbuild Ui kit into the project files animations and font styles to not work.

Thanks,

Damjan


Grzegorz Bujański staff answered 2 months ago

Then try to do exactly as it says in the manual here: https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/#section-custom-version-of-mdb-ui-kit

Copy the content from mdb.pro.js to index.js file, remove the lines and update path.

Copy the content from mdb.pro.scss to index.scss, remove the lines and update path.

Then run npm run buildMDB

We had a similar problem when configuring one of the projects. It turned out webpack did not compile files correctly unless they were imported directly in index.js


demzl25 premium commented 2 months ago

Thanks for your help, this has solved issue.


Grzegorz Bujański staff answered 2 months ago

In webpack-starter the most important JS file is index.js. If you miss some imports from this file, the custom MDB version will not be created correctly. I check the files you share on Google drive. I simply open index.html and check in the dev tools console what is inside the MDB object. And I see only free components. Therefore I suppose you didn't import the pro components correctly. To specify:

Do you copy the file content of mdb.pro.js and mdb.free.js to index.js and remove lines in index.js and update the paths?

Or do you import mdb.free.js and mdb.pro.js in index.js and remove modules line form mdb.free.js and mdb.pro.js?


demzl25 premium commented 2 months ago

In src/js/ folder I have put mdb.free.js and mdb.pro.js in the same folder where index.js is located and remove lines from mdb.free.js and mdb.pro.js and update the paths.

For scss I have put mdb.free.scss and mdb.pro.scss in src/scss/ in the same folder where index.scss and remove the lines and update the paths.

And then I have run npm run buildMDB


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.1.0
  • Device: Pc
  • Browser: Chrome 97.0.4692.99
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes