Skip to content

use bootstrap-select compont failed #750

@1751660300

Description

@1751660300

hi

i want to use bootstrap-select . then i import bootstrap-select.css and bootstrap-select.js by flx.assets.associate_asset

i want to use search select

image

But he didn't take effect, What should I do, please guide me, thank you.

`

-- coding: utf-8 --

from flexx import flx, event
from flexx.ui import create_element
from roc3_model.common_utils import local_static_file

local_static_file(name, "bootstrap.css", "css")
local_static_file(name, "jquery.js", "js")
local_static_file(name, "bootstrap.js", "js")
local_static_file(name, "bootstrap-select.css", "css")
local_static_file(name, "bootstrap-select.js", "js")

class DataList(flx.Widget):

options = event.TupleProp((("1", "1123"), ("2", "4567")), settable=True, doc="""
        A list of tuples (key, text) representing the options. Both
        keys and texts are converted to strings if they are not already.
        For items that are given as a string, the key and text are the same.
        If a dict is given, it is transformed to key-text pairs.
        """)

def _create_dom(self):
    global window
    node = window.document.createElement('div')
    return node

def _render_dom(self):
    global window
    options = self.options
    # node = window.document.createElement('div')
    data_list = window.document.createElement('select')
    for i in range(len(options)):
        key, text = options[i]
        option_item = window.document.createElement('option')
        option_item.setAttribute('value', key)
        option_item.innerText = text
        # option_item = create_element("option", {"value": key}, text)
        data_list.appendChild(option_item)

    # data_list = create_element("select",
    #                            {"class": "selectpicker",
    #                             "aria-label": "select example",
    #                             "data-live-search": "true",
    #                             "style": "width: 100%"},
    #                            option_list)

    data_list.setAttribute('class', "form-select form-select-lg mb-3")
    data_list.setAttribute('style', "width: 100%")
    data_list.setAttribute('data-live-search', "true")


    self.node.appendChild(data_list)


    return None

class Example(flx.Widget):

def init(self):
    with flx.VBox():
        flx.Label(text="123")
        DataList()
        flx.VBox(flex=1)

if name == 'main':
flx.launch(Example, "browser")
flx.start()`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions