Topic: Input padding and border
*_Expected behavior_*I don't want to use label on MDBInput, so i need to get rid of the 1.5rem padding top and bottom.
*_Actual behavior_*Beacause MDBInput is not one div but two div with a parent i can't override the padding even if i add a custom class to the MDBInput because the class is added to the children and not the parent.
Resources (screenshots, code snippets etc.)
if you look at the image you can see that my noPadding class has no effect beacause the padding are on the md-form class.
Hi there,
if you don't want to use label, then well, just don't use it ;) In that case, there is no label element in the outputted HTML code.
import React from "react";
import { MDBInput } from "mdbreact";
const InputPage = () => {
return (
<MDBInput />
);
}
export default InputPage;
Thomas free commented 5 years ago
The problem is not that i need to use or not the label, the problem is that i can't modify (override) the space on top or bottom of the MDBinput and MDBInput add 1.5rem and 1.1rem something like that and i can't override them because
the padding is set to the parent class div. But when you add a className="myClass" to the MDBInput component myClass is added to the Children not the parent. Beacause your MDBInput at the end is transformed in one Parent div and one Children div. Try it, add a custom className in your exemple and tell me if you can override someting that is set in the parent div class.
Maybe i wasn't clear enough
Jakub Mandra staff commented 5 years ago
Hi,
You can find all available properties and methods in API tab on the top of the documentation page https://mdbootstrap.com/docs/react/forms/inputs/
Use property containerClass to add a custom class to the input wrapper.
Best,
Jakub
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.11.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No