Selectize MultiDropdown - How to hide "Loading and Spin" and How to set "Top Margin" for entire drop down table

[christina1]

@Jici @Thimo and anyone familiar with Selectize: (Multi) Dropdown Input

Question 1 of 2
How to hide How to hide “Loading and Spin” upon page load, I tried custom state to show only but upon showing the word loading and spinning still run for few seconds… I want it to show Placeholder right away (similar to Searchbox)

In the below, the Searchbox appear with Placeholder but the 3 Selectize showing Loading…

Question 2 of 2
How to set “Top Margin” for entire drop down table, I set top margin in the Custom HTML but it applied to my list instead of the entire table.

In the example below, I want the drop down container to position on the red line (so it’s aligned with other empty searchbox instead of overlapping the searchbox bottom)…

Thank you so much in advance.

[Jici]

You need to add custom CSS to your page header.

<style>
.loader {
    visibility: hidden !important;
}
.selectize-input > b {
    visibility: hidden !important;
}
</style>

should do the trick
For b)
add:

.multi.selectize-dropdown {
    margin-top: 10px;
}

and

.single.selectize-dropdown {
    margin-top: 10px;
}

Just edit the 10px to the value you want

[christina1]

Thank you @Jici
For a) it works perfectly.

For b) where do I put the code? I placed in 3 places below but doesn’t work…

1. On my page HTML header (nothing happened)
2. Inside Custom HTML Code (with and without and ) (Dropdown data went blank)
3. Inside Custom Items HTML Code (with and without and ) (Dropdown data went blank)

Currently in my individual selective, I already have the following (adopted style from the Plugin Demo page with some modifications)

Thank you for your guidance in advance.

[Jici]

Everything at the same place in page header

<style>
.loader {
    visibility: hidden !important;
}
.selectize-input > b {
    visibility: hidden !important;
}
.multi.selectize-dropdown {
    margin-top: 10px;
}
.single.selectize-dropdown {
    margin-top: 10px;
}
</style>

[christina1]

I did that but doesn’t seems changing anything, i tried with 50px and 30px and the dropdown still has no effect… not sure what else I missed?

[Jici]

If you have a demo page, it will be easier to check. Possible that with your custom HTML, you need to make a change to the css

[christina1]

Here’s the demo page I cloned from the original and repurchased the plugin for the purpose of the guidance, for your further advise. Thank you again @Jici

Demo Link: TripPro Admin

I’ve opened up the Editor to be viewable too for easy review…

Bubble Editor - Cc-demo2

To add on, the Selectize Dropdown is residing here.

[Jici]

Try to add !important

.single.selectize-dropdown {
    margin-top: 10px !important;
}

[christina1]

@Jici

.single.selectize-dropdown {
    margin-top: 10px !important;
}

Yes! It works… thank you so much @Jici