Button size is increasing on click


Topic: Button size is increasing on click

sandor farkas pro premium priority asked 11 months 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.


Wojciech Staniszewski staff commented 10 months ago

Could you add your code here? I opened the snippet and everything works correctly.


sandor farkas pro premium priority answered 10 months 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 10 months 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 pro premium priority commented 10 months ago

I simply created a new react project outside of encore and webpack. Seems like it was some incompatibility.


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: Pro
  • 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
Tags