Border in switch


Topic: Border in switch

csax asked 3 years ago

Expected behavior Switch aligns with lever when adding border

Actual behavior Deaar Team I was using switches and added border. Then I realized, that when adding borders, the round level is slightly off centered and I did not find a way to center it. Can you tell me what is needed to get the objects to properly align again? One can reproduce as soon as you add border.

Thanks Chris

Resources (screenshots, code snippets etc.)
.switch label input[type=checkbox]:checked+.lever { background-color: #c7c7c7; border: black; border-radius: 5px; border-style: double; border-width: 2px; }


csax commented 3 years ago

Never mind, I found it. Adjust the background: .switch label .lever { background-color: #c7c7c7; border: black; border-radius: 5px; border-style: double; border-width: 2px; }

Adjust the inactive sphere: .switch label .lever:after { top: -5px; }

Adjust the active sphere: .switch label input[type=checkbox]:checked + .lever:after { background-color: #7babe3; top: -5px; }


Marta Szymanska staff pro premium commented 3 years ago

Hi,

I'm glad you found it. Do you need more help from us?

Best, Marta


csax commented 3 years ago

Thanks Marta I am perfectly fine si far. Best regards Chris


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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.8
  • Device: Windows1
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No