Selectize plugin in HTML

Selectize plugin in HTML

menashemenashe Posts: 196Questions: 43Answers: 2

I am using HTML to stylize the layout and positioning of Editor form fields.

       </div>
    </div>
    <div class="flex-container DTE_Field form-group row">
        <label class="flex-child col-lg-4 col-form-label">Limit:</label>
        <div class="flex-child purchase_limit_quantity col-sm-1">
            <div class="DTE_Field_InputControl" style="display: block;">
                <input id="purchase_limit_quantity" type="text" class="form-control">
            </div>
        </div>
        <div class="flex-child purchase_limit_units col-sm-2">
            <div class="DTE_Field_InputControl" style="display: block;">
                <select id="purchase_limit_units" name="purchase_limit_units" class="form-control" style="appearance: menulist">
                    <option value="" disabled selected hidden>Please select a unit...</option>
                    <option value=0> </option>
                    <option value=1>Items</option>
                    <option value=2>Offers</option>
                </select>
            </div>
        </div>
    </div>
    <!-- <editor-field name="crosswalk_prices_to_discounts.purchase_limit_quantity"></editor-field>

I have been able to use the select element.

How could I implement the selectize plugin (which use extensively elsewhere within my Editor code?

Answers

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin
  • menashemenashe Posts: 196Questions: 43Answers: 2

    Hi Allan,

    Not exactly what I meant.

    As I mentioned, I use the below type of code multiple times in my web app.

         "label": "Priority:",
         "name": "priority",
         "type": "selectize",
         "options": [
             { "label": "1 (highest)", "value": "1" },
             { "label": "2",           "value": "2" },
    

    What I would like to do is use selectize instead of select in the below example:

            <div class="flex-child must-buy-restriction col-sm-5">
                <div class="DTE_Field_InputControl" style="display: block;">
                    <select id="must-buy-restriction" name="must-buy-restriction" class="form-control" style="appearance: menulist">
                        <option value="" disabled selected hidden>Please select a Restriction...</option>
                        <option value=0> </option>
                        <option value=1>Must Buy</option>
                        <option value=2>When You Buy</option>
                    </select>
                </div>
            </div>
    

    Thank you for all of your help!

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    That is what "type": "selectize", should do. If the plug-in is loaded, it should convert the select into a Selectize field.

    If that isn't happening for you, could you give me a link to a page showing the issue please?

    Thanks,
    Allan

  • menashemenashe Posts: 196Questions: 43Answers: 2

    Allan,

    In the second image above, I am using html in the Editor template (not DataTables Editor code) because I want to format the look of the Editor form and the layout of fields.

    In html, can I utilize selectize?

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    I'm a bit confused since you posted an Editor field configuration. So you don't want an Editor field, but you do want Selectize? That being the case, I'm not clear why you can't just initialise it as a standard Selectize control?

    Sorry, I'm a bit confused :)

    Allan

Sign In or Register to comment.