Hi Robert, I have another issue. I bought a boots...
# kvision
k
Hi Robert, I have another issue. I bought a bootstrap template for my app, and it has a bootstrap.bundle.js and a bootstrap.css with other custom css and js.. I tried with the kvision-bootstrap with other custom js and css. The ui didn't layout correctly. So I removed the kvision-bootstrap dependency from the build, and included the bootstrap js and css in index.html. Everything worked so far, until I wanted a Select component from kvision-bootstrap-select. Somehow there is clash with these two, and the Select component opens when I click any of the other components next to it. Cant see any console errors or js errors in the browser. Any clue?
r
I don't think it's currently possible to use custom bootstrap js. I haven't even considered such idea (why create the whole new bundle instead of additional js file??)
Please fill an issue and I will investigate possibilities.
k
I know, including the bundle is not needed, but the template does not work with kvision-bootstrap. When I include the bundle or from cdn it works. By the way, the SimpleSelect works fine but not the Select
Is there a way to use formPanel add(). with custom select2 component together with binding?
r
Maybe there is a problem with jQuery? Does your template include jQuery?
k
Yes, it has
r
And is it included in the
index.html
file before custom bootstrap bundle?
k
yes
r
So you have two jquery instances
one external and one from kvision
You need to have external jquery because it has to be loaded before bootstrap.
But you also have to follow the solution from this issue to make kvision work with the same jquery instance.
I think it will work with this, allowing you to use other
kvision-bootstrap-*
modules
Still you wont be able to use main
kvision-bootstrap
module
But I think I have a solution for this for the next release.
Not 100% sure yet, though 😉
k
On the jquery duplicate.. I even tried by removing jquery from index.html, but got an error Jquery not found. I will try with adding the
Copy code
config.externals =
But how come SimpleSelect works with external bootstrap and jquery and not Select?
r
SimpleSelect is just a basic <select> html tag
which is a jQuery/Bootstrap component
I've just found another, simple way for you. Try adding this to your webpack.config.d/webpack.js:
Copy code
module.exports = {
  externals: [ /bootstrap.bundle.min.js/i,  { jquery: 'jQuery' } ],
};
It should externalize both jquery and bootstrap
Add jquery and your bundle above main.bundle.js and try
It should work with
kvision-bootstrap
module as well
k
great..
but why to include both bootstrap-bundle and kvision-bootstrap? I am confused..
r
kvision-bootstrap is not only about bootstrap js files. It contains many kvision components (eg. TabPanel)
k
"""Add jquery and your bundle above main.bundle.js""". Do you mean include the <script> in index.html?
r
yes
You probably already did this
k
ok, and how about the path in the module.exports.. /bootstrap.bundle.min.js/
I have my bundle. web/js/. should that be fine?
r
It's the other way around 🙂
externals tells webpack to ignore
bootstrap.bundle.min.js
used in KVision
k
ah I see
r
We have
require("bootstrap/dist/js/bootstrap.bundle.min.js")
so a regexp is needed
k
cool
No luck.. SimpleSelect works fine. Select renders without any errors, but when I click any other component on its right.. Firefox flickers it, Chrome opens the select
I did gradlew clean and tried..
r
indeed there seems to be some issue with Select component
it doesn't work for me either with standard bootstrap externalized
but all other jquery components work fine (e.g. spinner or datetime)
I'll try to check this later today
k
Thank you so much for your time..
r
it doesn't seem to be a problem with your template, so no worry 😉 I hope we will find a way to fix this 😉
k
As an alternative, I can use select2 component. If I include the select2 css and js, and include the class "select2" in SimpleSelect component it actually sets the class on the outer div..
Copy code
add(
    MySearch::category,
    SimpleSelect(
        options = listOf(Pair("*", "All categories")) + (Category.values().map { it.name to tr(it.name) }),
        value = state.currentSearch.category
    ) {
        selectedIndex = 0
        addCssClass("col-xs-12")
        addCssClass("select2")
    }
)
renders like this..
Copy code
<div class="form-group col-xs-12 select2">
    <label class="control-label" for="kv_form_simpleselect_0"></label>
    <select class="form-control" id="kv_form_simpleselect_0">
        <option value="*" selected="selected">All categories</option>
        .....options.....
    </select>
</div>
r
I'm stupid ;-] I've given you wrong syntax for externalizing. Use this:
Copy code
config.externals = [ { jquery: 'jQuery' }, /bootstrap.bundle.min.js/i ];
It works fine for me with Select component
h
This would probably be a good addition to the kvision-guide documentation?