Button rounded and color issues

Topic: Button rounded and color issues

rrt free asked 5 years ago

I am using git pro version of MDB React, however I am experiencing some issues with buttons.

When I use rounded attribute the .btn class sets the border-radius and this is not getting overridden by .btn-rounded class. Currently I use workaround and add custom button class with border-radius with CSS to achieve that effect.
I cannot use color="light-blue darken-4". If I set it to color="light-blue" and add class="light-blue darken-4", it fills the outlined button and when button clicked it will change the border color which is light-blue without the part darken-4. Even if I try to achieve it with CSS and !important it does get overridden by MDB.

Add comment

Jakub Chmura staff answered 5 years ago

We are currently trying to fix button classes. We have problems with them because bootstrap uses a lot of !Important's in its code. We are afraid that these changes will require breaking change and major release so I can't say when they will be published. At the moment you have to manage writing your custom CSS classes.

Best, Kuba

rrt free commented 5 years ago

Hi @Jakub Chmura,

Thank you for your response. Is this valid for rounded button as well or only for color classes.

Thank you.

Jakub Chmura staff commented 5 years ago

Rounded buttons are a pro component, so you won't be able to use them as a free user.

rrt free commented 5 years ago

I have pro license bought with another account and I am able to access them, however they still do not work as intended. Please refer to point 1 from the original question.

Jakub Chmura staff commented 5 years ago

I have tested rounded btn's right now and it works fine for me.

Check this, code below was copied directly from our documentation.

import React, { Fragment } from 'react'; import { MDBBtn } from 'mdbreact';
const ButtonPage = () => {
  return (
    <Fragment>
      <MDBBtn color='primary' rounded>
        Primary
      </MDBBtn>
      <MDBBtn rounded>Default</MDBBtn>
      <MDBBtn rounded color='secondary'>
        Secondary
      </MDBBtn>
      <MDBBtn rounded color='success'>
        Success
      </MDBBtn>
      <MDBBtn rounded color='info'>
        Info
      </MDBBtn>
      <MDBBtn rounded color='warning'>
        Warning
      </MDBBtn>
      <MDBBtn rounded color='danger'>
        Danger
      </MDBBtn>
    </Fragment>
  );
};

export default ButtonPage;

Please give me more details about how to reproduce your issue, show me code, and maybe screenshot from dev-tools. I don't know how to help you right now, because I don't know what's wrong with your code.

Best, Kuba

I have tested rounded btn's right now and it works fine for me.

Check this, code below was copied directly from our documentation.

<pre class="prettyprint"><code>import React, { Fragment } from 'react'; import { MDBBtn } from 'mdbreact';
const ButtonPage = () => {
 return (
 <Fragment>
 <MDBBtn color='primary' rounded>
 Primary
 </MDBBtn>
 <MDBBtn rounded>Default</MDBBtn>
 <MDBBtn rounded color='secondary'>
 Secondary
 </MDBBtn>
 <MDBBtn rounded color='success'>
 Success
 </MDBBtn>
 <MDBBtn rounded color='info'>
 Info
 </MDBBtn>
 <MDBBtn rounded color='warning'>
 Warning
 </MDBBtn>
 <MDBBtn rounded color='danger'>
 Danger
 </MDBBtn>
 </Fragment>
 );
};

export default ButtonPage;
</code></pre>

Please give me more details about how to reproduce your issue, show me code, and maybe screenshot from dev-tools. I don't know how to help you right now, because I don't know what's wrong with your code.

Best, Kuba

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.25.5
Device: Laptop
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

rrt

5Support score
1Questions 0Answers 0Snippets