Topic: Button size is increasing on click
sandor farkas priority asked 2 years ago
Expected behavior Button size should not increase
Actual behavior Button size is increasing on click
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/react/sandorfarkas/3249870 https://screenrec.com/share/OkPrha3XRz
Unfortunately, I can't reproduce it in the shared snippet.
bahattin free answered 10 months ago
I have the same issue. Is there any solution about the problem.
Mateusz Lazaru staff commented 10 months ago
There is no solution as the last reported problem turned out to be not related to mdb ui kit. Please check if the problem occurs in a clean project. It's very possible that some other styles affect the button. If that's not the case, please open a new ticket and describe your problem with more details, with code snippets, screenshot if possible.
sandor farkas priority answered 2 years ago
Yes, inside the snippet I also have no issues. I have to mention that I use react and mdbootstrap within a symfony installation which used used together with webpack and encore. But this does not explain why the button increases within the simple home.js component.
Home.js
import React from "react";
import { MDBBtn } from 'mdb-react-ui-kit';
function Home(props) {
return (
<>
<MDBBtn>Speichern</MDBBtn>
</>
)
}
export default Home;
package.json
{
"devDependencies": {
"@babel/preset-react": "^7.14.5",
"@symfony/stimulus-bridge": "^2.0.0",
"@symfony/webpack-encore": "^1.0.0",
"axios": "^0.21.1",
"core-js": "^3.0.0",
"mdb-react-ui-kit": "git+https://oauth2:@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"regenerator-runtime": "^0.13.2",
"stimulus": "^2.0.0",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.15.0",
"dotenv-webpack": "^7.0.3",
"react-csv-reader": "^3.3.1",
"react-router-dom": "^5.2.0"
}
}
webpack.config.js
const Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
const Dotenv = require('dotenv-webpack');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/app.js')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery();
module.exports = Encore.getWebpackConfig();
Wojciech Staniszewski staff commented 2 years ago
Are you using some custom styles? And could you upload your project to GitHub? Because I find it really hard to recreate this problem.
sandor farkas priority commented 2 years ago
I simply created a new react project outside of encore and webpack. Seems like it was some incompatibility.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 1.0.0-beta6
- Device: desktop
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: Yes
Wojciech Staniszewski staff commented 2 years ago
Could you add your code here? I opened the snippet and everything works correctly.