Topic: Making buttons smaller
Expected behavior*_Trying to make MDB buttons smaller than "small"The button appears on the nav Bar as a circle but would like it to be smaller so I am able to get another button there as there is a lot of space either side that could be tightened up._*Actual behavior*_no result either via css or other means seems to work. Is there a way of doing this?_*Resources (screenshots, code snippets etc.)
<MDBDropdown drop>
<MDBDropdownToggle nav >
<MDBBtn tag="a" size="sm" floating gradient="blue"><MDBIcon icon="bars" /> </MDBBtn>
Try this:
.test-class {
width: 25px !important;
height: 25px !important;
}
.test-class i {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
line-height: 0 !important;
height: 100% !important;
font-size: .7rem !important;
}
<MDBBtn tag='a' floating gradient='purple' size='lg' className='test-class'>
<MDBIcon icon='bolt' />
</MDBBtn>
mark-steven-au pro premium commented 4 years ago
Hi Piotr, Yes this worked perfect! Obviously not using the !important was the key. Thanks very much
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: 4.27.0
- Device: iOS
- Browser: chrome, safari, firefox
- OS: iOS
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 4 years ago
I'm not sure that is a bug. Did you try to use own CSS to fix this?
mark-steven-au pro premium commented 4 years ago
Hi Piotr, Yes I tried to use CSS to make it smaller but it seems to have no effect so I was wondering if MDB had some sort of set values locally in the JS that cannot be overwritten by CSS
Piotr Glejzer staff commented 4 years ago
Hmm, the class name prop should work normally? Did you try this?
mark-steven-au pro premium commented 4 years ago
HI Piotr Yes did try className etc but for some reason it did not seem to effect anything to do with the button. Hence why I thought maybe it was over ridden somehow in MDB script. Only sizes it appears to respond to are size="sm" "lg" Happy see an example if you can with this round button that does work either internal or external css as for some reason it does not work for me.