Topic: Animations on Custom version of MDB UI KIT dont work
demzl25 priority asked 2 years 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 answered 2 years 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
Grzegorz Bujański staff answered 2 years 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 priority commented 2 years 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- 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
Grzegorz Bujański staff commented 2 years 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 priority commented 2 years 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.
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.
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.
I have run terminal in VCS with command npm install.
I have run npm run startMDB.
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