Select component displays option label below checkbox in mul

Topic: Select component displays option label below checkbox in multiselect

NitinMistry free asked 5 years ago

Hi,

I'm using the latest v4.6.0 (not available in your dropdown). When I use the Select component with multiselect, the label for the options displays below the checkbox for each option as seen below. I tried my best to float the :before pseudo element to make the label element place beside it but to no avail.

Can you please help me?

You can view the demo at https://prototype.womb.healthcare/sf365/html/select.html

Add comment

Piotr Glejzer staff answered 5 years ago

1 0 Best answer

Hi,

there is a problem with your code CSS. The code below is ruining your select:

label {
width: 100%;
}

If you will remove it will be ok.

This is your select in our snippets without your CSS code and everything is working well.

https://mdbootstrap.com/snippets/jquery/piotr-glejzer/273972

Best,

Piotr

Add comment

NitinMistry free answered 5 years ago

0 0 Best answer

Thanks Piotr. It worked. I had to give 100% to all labels for a different cause, but then I've overridden this particular class and made the necessary changes.

Piotr Glejzer staff commented 5 years ago

Your welcome. I'm glad to hear you resolved your problem! Well done. Have a nice day.

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 jQuery
MDB Version: 4.5.15
Device: Desktop
Browser: Chrome 71.0.3578.98 (64-bit)
OS: Windows 8.1
Provided sample code: No
Provided link: Yes

NitinMistry

205Support score
11Questions 13Answers 0Snippets