https://kotlinlang.org logo
Channels
Powered by
k

Kumaran Masilamani

05/08/2021, 8:30 AM
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

Robert Jaros

05/08/2021, 10:06 AM
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

Kumaran Masilamani

05/08/2021, 4:29 PM
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

Robert Jaros

05/08/2021, 4:36 PM
Maybe there is a problem with jQuery? Does your template include jQuery?
k

Kumaran Masilamani

05/08/2021, 4:36 PM
Yes, it has
r

Robert Jaros

05/08/2021, 4:37 PM
And is it included in the 
index.html
file before custom bootstrap bundle?
k

Kumaran Masilamani

05/08/2021, 4:37 PM
yes
r

Robert Jaros

05/08/2021, 4:38 PM
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

Kumaran Masilamani

05/08/2021, 4:52 PM
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

Robert Jaros

05/08/2021, 4:56 PM
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

Kumaran Masilamani

05/08/2021, 4:59 PM
great..
but why to include both bootstrap-bundle and kvision-bootstrap? I am confused..
r

Robert Jaros

05/08/2021, 5:01 PM
kvision-bootstrap is not only about bootstrap js files. It contains many kvision components (eg. TabPanel)
k

Kumaran Masilamani

05/08/2021, 5:01 PM
"""Add jquery and your bundle above main.bundle.js""". Do you mean include the <script> in index.html?
r

Robert Jaros

05/08/2021, 5:02 PM
yes
You probably already did this
k

Kumaran Masilamani

05/08/2021, 5:02 PM
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

Robert Jaros

05/08/2021, 5:03 PM
It's the other way around 🙂
externals tells webpack to ignore 
bootstrap.bundle.min.js
used in KVision
k

Kumaran Masilamani

05/08/2021, 5:03 PM
ah I see
r

Robert Jaros

05/08/2021, 5:04 PM
We have 
require("bootstrap/dist/js/bootstrap.bundle.min.js")
so a regexp is needed
k

Kumaran Masilamani

05/08/2021, 5:05 PM
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

Robert Jaros

05/08/2021, 5:10 PM
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

Kumaran Masilamani

05/08/2021, 5:12 PM
Thank you so much for your time..
r

Robert Jaros

05/08/2021, 5:13 PM
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

Kumaran Masilamani

05/08/2021, 5:13 PM
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

Robert Jaros

05/08/2021, 9:38 PM
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

Hywel Bennett

05/08/2021, 11:27 PM
This would probably be a good addition to the kvision-guide documentation?
4 Views
Powered by