How to get Rid of Underline on MDBDatePicker


Topic: How to get Rid of Underline on MDBDatePicker

Mike.Thomson asked 5 years ago

How do I get rid of the underline of the MDBDatePicker I have tried assigning class of 'tp-datepicker' and adding the following CSS This partially gets rid of underline but there is still a narrow trace line (and I cant work out where it is)

 .tp-datepicker {
  background-color: aliceblue !important;
  border: 0 !important;
  resize: none;
  border-radius: 0.25rem !important;
  box-shadow: 0 !important;
  border-bottom: 0px !important;
}

.tp-datepicker :after {
  box-shadow: 0 !important;
  border-bottom: 0px !important;
}

.tp-datepicker ::before {
  box-shadow: 0 !important;
  border-bottom: 0px !important;
}

tp-datepicker ::after {
  box-shadow: 0 !important;
  border-bottom: 0px !important;
}

.tp-datepicker :hover {
  box-shadow: 0 1px 0 blue;
}

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


Jakub Chmura staff premium answered 5 years ago

Hi @Mike.Thomson,

You need to add a CSS code to your stylesheet like this:

div.md-form input[type="text"]:not(.browser-default) {
    border-bottom: none;
}

And overwrite ::after and ::before element also in your stylesheet like this :

[data-test:"date-picker"] div div:after {
content: none;
}

and

[data-test:"date-picker"] div div:before {
content: none;
}

And check if ...: after and ...: before selector works in your case, if not you will need to specify a selector to these elements.

Best, Kuba


Yes that works, excepts css should be

[data-test='date-picker'] div div:after {

content: none; }

[data-test='date-picker'] div div:before {
  content: none;
}

Jakub Chmura staff premium commented 5 years ago

Good to hear that this code works fine for you. Feel free to ask if you need anything.

Best, Kuba


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.4
  • Device: Windows
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No