Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use bootstrap-select compont failed #750

Open
1751660300 opened this issue Sep 27, 2024 · 0 comments
Open

use bootstrap-select compont failed #750

1751660300 opened this issue Sep 27, 2024 · 0 comments

Comments

@1751660300
Copy link

1751660300 commented Sep 27, 2024

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()`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant