mdbootstrap / black-friday-2023 Goto Github PK

Why grid system use flex-box?
The Grid CSS system has been available for a long time

Some of you have proposed to left out SASS of the scope of this new version in favor of pure CSS?

Is there any discussion of this somewhere?

We all know that now we have CSS variables and the upcoming :is() function in Selector Level 4 that is being rapidly adopted by the web browsers market. So, is it worth to keep using SASS in this new version of MDMBootstrap?

Is it only for me or README.md file don't load fully on github?
MacOs Mojave, left - Chrome, right - Safari.

I cannot override color variable as what I used to.

It should work by overriding bootstrap variable in xxx\node_modules\mdb-ui-kit\src\scss\custom\_variables.scss. I added some pieces of code as following:

// Your custom variables

$secondary: #00ea12;

However, it does not work. Nothing has been overrided when I do sth like <button class="btn btn-secondary"></button>. Is this broken in MDB 5?

UPDATE:

Seems that those variable inside _variable.scss do not have !default suffix

Hi,

I have an NRWL Angular project, I bought the pro essential pack of MD Bootstrap 5 and was following this tutorial: https://www.youtube.com/watch?v=Ro1x0zYUwwA But at the very first step I have already problems. The sidebar copied in the tutorial works directly in the tutorial, with its dropdowns and responsivness, but when I do it I get a sidebar, the dropdowns are not working (Do not show the option). And there is a button which works in the component webpage but not with me.

I do not want to import the styles or the scripts in my html but in my angular.json which I did and looks like this:

 "styles": [
          "apps/moniesta-admin/src/styles.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
          "node_modules/animate.css/animate.css",
          "node_modules/bootstrap/scss/bootstrap.scss",
          "node_modules/mdb-ui-kit/css/mdb.min.css",
          "node_modules/mdb-ui-kit/src/scss/mdb.core.scss",
          "node_modules/mdb-ui-kit/src/scss/mdb.free.scss",
          "node_modules/mdb-ui-kit/src/scss/mdb.pro.scss"


        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/easy-pie-chart/dist/easypiechart.js",
          "node_modules/screenfull/dist/screenfull.js",
          "node_modules/hammerjs/hammer.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.js",
          "node_modules/mdb-ui-kit/js/mdb.min.js",
          "node_modules/mdb-ui-kit/src/js/mdb.pro.js",
          "node_modules/mdb-ui-kit/src/js/mdb.free.js"


          ]
      },

Is my configuration wrong?

Hi, First of all, I love the framework and appreciate your work.

Is there a way to disable the cookies that are been set on the client-side from the domain: mdbootstrap.com, I don't see the need for them since I'm not using a CDN.

Here's a screen shot:

💸 (PAY WHAT YOOU WANT) Python Book Bundle
But:
THE BUNDLE YOU'RE LOOKING FOR IS OVER THIS BUNDLE WAS LIVE FROM NOV 15, 2021 TO DEC 6, 2021 WITH 17,217 BUNDLES SOLD, LEADING TO €24,964 RAISED FOR CHARITY.

Hi there,

I'm currently migrating from https://github.com/mdbootstrap/bootstrap-material-design to mdb-ui-kit.

Unfortunately the ripple effect is displayed on mouse up instead of mouse down as it was implemented in bootstrap-material-design.

Even the Google demo displays it that way.

Would be nice if you can follow the Google specifications. What do you say?

So lonG
Daniel

I'm trying to integrate Material + Bootstrap 5 to an existing project using Vue.js + Bootstrap 4.

mdb.min.css is imported in main.js and it's working just fine. But I have to import mdb.min.js in mounted hook in App.vue for it to work.

The problem is that mdb.min.js is not loaded on route change (vue-router) so the styles for input fields are missing. Whenever route changed, I have to refresh page for the script to work again.

I'm not sure whether I import the script incorrectly or is it the problem with current mdb version? Is there a way to fix it?

I always get below error message on route change and you can see the styles for inputs are missing

I also tested with the CDN but it still produced the same errors on route change

When I created some <input />, supposed that a border would be generated as well. i.e. sth like .form-notch. However, these elements was not generated if such <input /> is created on the fly.

UPDATE:
Seems that MutationObserver is not working in this version. i.e. input notch is not applied If I created an element after page rendered.

UPDATE (replay method):
Please go to https://mdbootstrap.com/docs/standard/forms/input-fields/ and paste those code in dev console. You will find that an input element with no-border will be create at the bottom of the page.

var wrapper = document.createElement('div');
wrapper.classList.add('form-outline')

var input = document.createElement('input');
input.id = 'form111';
input.classList.add('form-control');

var label = document.createElement('label');
label.classList.add('form-label');
label.setAttribute('for', 'form111');
label.innerText = 'Example Label'

wrapper.appendChild(input);
wrapper.appendChild(label);

document.body.appendChild(wrapper);

Hello. I have the following drawbacks. I use the min version 1.1.0 of mdb-ui-kit (both css and js from CDN). mdb4 classes for input leading and trailing icons are not supported for mdb5?. Is there structure and classes for it in mdb5?. Is the character counter already implemented in the form-outline?. If the answer is no, do you plan to add it?.

I can't focus Input fields in mobile device.

Phone: Google Pixel 4 XL
Browser: Google Chrome

Hi! I'm trying to using mdb-ui-kit with react, but when I compile the react, mdb.min.css throwing this error:

Is mdb-ui-kit doesn't support react?

I have a simple login form and I'm trying to add two inputs for email and password but I can't seem to make the borders appear. I'm using the latest (alpha2) release.

Here's my example HTML:

Note that I am wrapping the input fields inside of a div with card class applied. Would that somehow be the cause of the issue?
I would be very appreciative if you could give me any advice.

If you repeatedly mouse over or off the "X" button at high speed, an error will occur.
「X」ボタン上でマウスオーバーしたり外したりを高速で繰り返すと、エラーになります。

MDB 5 : Release 1.1.0, 1.0.0
Google Chrome は最新版です　バージョン: 85.0.4183.102（Official Build） （64 ビット）
(The same was true for Firefox 80.0.1 (64 bit))
（Firefox 80.0.1 (64 ビット)でも同じでした）

`<!doctype html><html>
<head><meta charset="utf-8"/>
<link rel="stylesheet" href="mdb.min.css">
<script defer src="mdb.min.js"></script>
</head>
<body>

<nav class="navbar fixed-top navbar-expand navbar-dark bg-dark">
<div class="container-fluid">

<div class="collapse navbar-collapse mr-auto">
	<button id="close" type="button" class="btn btn-outline-light py-0" aria-label="Close" data-toggle="tooltip" title="Close">
		<span style="font-size: 2em;" aria-hidden="true">&times;</span>
	</button>
</div>

</div>
</nav>

</body></html>`

mdb.min.js:44 Uncaught TypeError: Cannot read property 'destroy' of null
at t (mdb.min.js:44)
at r.value (mdb.min.js:44)
at r.value (mdb.min.js:44)
at HTMLSpanElement. (mdb.min.js:44)
at HTMLSpanElement.t (mdb.min.js:44)
tooltip.zip