Search input with .form-outline div wrapper has no border

Topic: Search input with .form-outline div wrapper has no border

ansley257 pro premium asked 2 years ago

Expected behavior I'm trying to get my search bar to look and behave like the basic one found in the docs, here.

Actual behavior Without the .form-outline div, my label falls outside of the search bar, but with it, the search bar has no border. If I add the border back in manually, when the label moves up when you type, it doesn't break the line like the one in that link, it just goes right through it.

Resources (screenshots, code snippets etc.)

Mdb's example: MDB search example on site from code above.

My environment with form-outline: enter image description here or with a css border:

I'm not sure where the form-outline class comes from or what it does, since it's not in the dist css/scss, and I can't seem to find mention of what it does anywhere.

Add comment

ansley257 pro premium answered 2 years ago

0 0 Best answer

I figured it out. You have to have this inside the form-outline div. Would love to see this in your documentation. I don't know why this works, but it does:

const style1 = {
    width: 9
}

const style2 = {
    width: 66.4
}

mlazaru staff commented 2 years ago

Here is some informations about form-outline. It provides design.

Does this problem from screenshot appear with code copied from the docs? Thats weird, because I've just checked this code and it works fine on my enviroment, on snippets and we didn't receive any other issue reports. Could you send your device details?

enter image description here

Add comment

Ghougassian pro premium priority answered 2 years ago

0 0 Best answer

I actually was having the same exact issue until I found this post. ansley257's solution helped me troubleshoot where the issue was...

Because of how the dependency loading works on my project, the code for the form input was being written after the MDB JS files were loaded leading to this error:

enter image description here