Hi Robert, I have another issue. I bought a bootstrap template for my app, and it has a bootstrap.b...

# kvision

[Kumaran Masilamani]

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?

[Robert Jaros]

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??)

[Robert Jaros]

Please fill an issue and I will investigate possibilities.

[Kumaran Masilamani]

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

[Kumaran Masilamani]

Is there a way to use formPanel add(). with custom select2 component together with binding?

[Robert Jaros]

Maybe there is a problem with jQuery? Does your template include jQuery?

[Kumaran Masilamani]

Yes, it has

[Robert Jaros]

And is it included in the index.html file before custom bootstrap bundle?

[Kumaran Masilamani]

yes

[Robert Jaros]

So you have two jquery instances

[Robert Jaros]

one external and one from kvision

[Robert Jaros]

https://github.com/rjaros/kvision/issues/260#issuecomment-828850692

[Robert Jaros]

You need to have external jquery because it has to be loaded before bootstrap.

[Robert Jaros]

But you also have to follow the solution from this issue to make kvision work with the same jquery instance.

[Robert Jaros]

I think it will work with this, allowing you to use other kvision-bootstrap-* modules

[Robert Jaros]

Still you wont be able to use main kvision-bootstrap module

[Robert Jaros]

But I think I have a solution for this for the next release.

[Robert Jaros]

Not 100% sure yet, though 😉

[Kumaran Masilamani]

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

config.externals =

[Kumaran Masilamani]

But how come SimpleSelect works with external bootstrap and jquery and not Select?

[Robert Jaros]

SimpleSelect is just a basic <select> html tag

[Robert Jaros]

Select is based on https://github.com/snapappointments/bootstrap-select

[Robert Jaros]

which is a jQuery/Bootstrap component

[Robert Jaros]

I've just found another, simple way for you. Try adding this to your webpack.config.d/webpack.js:

module.exports = {
  externals: [ /bootstrap.bundle.min.js/i,  { jquery: 'jQuery' } ],
};

[Robert Jaros]

It should externalize both jquery and bootstrap

[Robert Jaros]

Add jquery and your bundle above main.bundle.js and try

[Robert Jaros]

It should work with kvision-bootstrap module as well

[Kumaran Masilamani]

great..

[Kumaran Masilamani]

but why to include both bootstrap-bundle and kvision-bootstrap? I am confused..

[Robert Jaros]

kvision-bootstrap is not only about bootstrap js files. It contains many kvision components (eg. TabPanel)

[Kumaran Masilamani]

"""Add jquery and your bundle above main.bundle.js""". Do you mean include the <script> in index.html?

[Robert Jaros]

yes

[Robert Jaros]

You probably already did this

[Kumaran Masilamani]

ok, and how about the path in the module.exports.. /bootstrap.bundle.min.js/

[Kumaran Masilamani]

I have my bundle. web/js/. should that be fine?

[Robert Jaros]

It's the other way around 🙂

[Robert Jaros]

externals tells webpack to ignore bootstrap.bundle.min.js used in KVision

[Kumaran Masilamani]

ah I see

[Robert Jaros]

We have require("bootstrap/dist/js/bootstrap.bundle.min.js")

[Robert Jaros]

so a regexp is needed

[Kumaran Masilamani]

cool

[Kumaran Masilamani]

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

[Kumaran Masilamani]

I did gradlew clean and tried..

[Robert Jaros]

indeed there seems to be some issue with Select component

[Robert Jaros]

it doesn't work for me either with standard bootstrap externalized

[Robert Jaros]

but all other jquery components work fine (e.g. spinner or datetime)

[Robert Jaros]

I'll try to check this later today

[Kumaran Masilamani]

Thank you so much for your time..

[Robert Jaros]

it doesn't seem to be a problem with your template, so no worry 😉 I hope we will find a way to fix this 😉

[Kumaran Masilamani]

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..

[Kumaran Masilamani]

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")
    }
)

[Kumaran Masilamani]

renders like this..

[Kumaran Masilamani]

<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>

[Robert Jaros]

I'm stupid ;-] I've given you wrong syntax for externalizing. Use this:

config.externals = [ { jquery: 'jQuery' }, /bootstrap.bundle.min.js/i ];

[Robert Jaros]

It works fine for me with Select component

[Hywel Bennett]

This would probably be a good addition to the kvision-guide documentation?