Bootstrap js with kendo Conflicting - javascript

I am creating a project using Javascript. In my project i am using kendo with bootstrap. The Problem some of the kendo and bootstrap are conflicting.I know there is $.noconflict, But this create me lot of problems. Mainly the kendodropdown is conflicting.
<!-- Mainly scripts -->
<script src="$themeDisplay.getPathThemeRoot()/js/jquery-2.1.1.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/bootstrap.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/jquery.mousewheel.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/jquery.jscrollpane.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/custom.js?v=$version"></script>
If I remove the bootstrap file then kendo functions working properly.Please help me for using kendo and bootstrap together.
The exact issue is when i open dropdown and scrolls it automatically closes.
This is the code:
$("#searchTktID").kendoDropDownList({
filter: "startswith",
});
and am handling this situation using
close: function(e){
if(isScroll) {
e.preventDefault();
}
},
open:function(){
isScroll = true;
},
But this is not correct way i think.

Without knowing your exact problem it sounds like it may be a script ordering problem.
For example this is how I include the scripts in my projects for kendo and bootstrap integrated MVC apps.
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap-switch.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2019.2.514/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="#Url.Content("~/Scripts/umd/popper.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")"></script>
#Scripts.Render("~/bundles/fa")
#Scripts.Render("~/bundles/Custom")
As long as you ensure that the bootstrap.js file is loaded after the kendo.js files you should be good.
As I said in my comment I have been using this approach for both version 3.x and 4.x
Edit: Please see a this dojo with bootstrap and kendo libraries working together.
https://dojo.telerik.com/AkIBOjOr/2
One thing to check is that you aren't reloading JQuery after you have loaded the kendo js files as that will show the kendoDropDownList is not a function error.
Edit 2: I have added filtering on the cap colour dropdown list.

That is one of the downsides of Kendo, you will need to customize your controls to look the way you would like. Kendo override your base bootstrap css, and mainly on the controls like dropDown, comboBox, autoComplete they are quite problematic. One solution is to use the telerik theme builder
You are able to customize your controls and download the CSS files. Other solution will be choosing a different theme from the bootstrap theme but both solutions need to override your css to get the final design you intend.
general documentation for setup a theme

Related

Can you mix bootstrap 3.3 and bootstrap 4.1? I have tried and it breaks the website

I am trying to use bootstrap and twitter bootstrap at the same time. Basically, I can't seem to get them to work together. Are they even supposed to work together? You can see the js Fiddle here. https://jsfiddle.net/paralaxwombat/v7hpoc6m/4/
There are two sets of bootstrap call lines.
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
If you remove one of them, the nav bar works and the bottom doesn't. If you remove the bottom the nav bar doesn't work but the bottom does.
I am wondering if there is a workaround.
Twitter Bootstrap is Bootstrap. You are trying to mix version 3 and version 4.
They are not designed to work together. Bootstrap 4 is designed to completely replace Bootstrap 3.
Use version 4. Change the code which is following version 3 conventions to use version 4 conventions.
You are trying to use two different versions of the same library so I think the answer will be 'No'.
I don't know if there's a document with all the similarities and differences, but I know the 3.3 javascript api and the 4.1 javascript api conflict.
There are 2 versions of bootstrap and you are trying to use both of them at the same time. These are all versions of bootstrap Versions. If you want to know more about them check bootstrap.

Bootstrap JS script not working

So I have a webpage, and I have all of the js scripts in the footer of the webpage, yet it is not letting me use the js functions of bootstrap, like using drop downs. The
Can anyone help?
I can't put the code here because of the character limit, but here is a paste bin:
http://pastebin.com/fzy6e5CZ
I find that linking to scripts makes your page relatively slow. I would try using a CDN, here is the code to include the min. versions of those scripts through the CloudFlare CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.3/holder.min.js"></script>
Use the following for Bootstrap CSS
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" type="text/css">
I think you should update your jQuery and bootstrap .js file and check your file adding path is right. Your file destination exactly there where you trigger it?

How to include Material Design libraries without npm

How to use Material UI in simple html page without installing it using npm ?
is there a way I can use material UI like bootstrap, like including a css library and/or a javascript library and start using sample codes like these http://material-ui.com/#/components/buttons
You can use following CDN url.
https://cdn.rawgit.com/sam-g-steel/bbb0bd62238db76025bc6e2a3e9d576f/raw/32f8e0a099d463b73d214ffdd77d2b4bc5e53026/material-ui-react.min.js
Check this http://codepen.io/meprasobh/pen/MpvKRE
According to https://material.io/develop/web/getting-started, it looks like you need to include these files:
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
You can use a CDN
Here is an example CDN for Bootstrap3 based ui :
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/css/material-wfont.css
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/css/material-wfont.min.css
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/css/material.css
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/css/material.min.css
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/css/ripples.css
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/css/ripples.min.css
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/fonts/Material-Design-Icons.eot
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/fonts/Material-Design-Icons.svg
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/fonts/Material-Design-Icons.ttf
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/fonts/Material-Design-Icons.woff
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/js/material.js
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/js/material.min.js
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/js/ripples.js
//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.6/js/ripples.min.js

jQuery UI dialog widget not appearing

For the last two days I've been trying to understand why I can't build a jQuery Dialog. I am trying to integrate it into another project but I couldn't so I created a new test html page for the sole purpose of building a simple one that works. I've tried multiple configurations and nothing works. I've attempted it on js fiddle and it works (on an older version, mind) leading me to assume I've messed up my headers.
<script src="../jQuery/jquery-ui-1.11.0.custom/external/jquery/jquery.js"></script>
<script src="..jQuery/jquery-ui-1.11.0.custom/jquery-ui.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.theme.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.structure.css">
test.js contains jquery code as seen in js fiddle link above. Am I missing anything? What am I doing wrong?

Foundation.js dropdown menu in Ember.js

I'm trying to use the Foundation framework in an Ember app. The problem I'm having is with the navbar dropdown menu. When placing the Foundation layout in the handlebars template, the navbar no longer works on hover or on click. However, if you shrink the window so the mobile version is displayed, the navbar works on click. I'm pretty sure it's not the Foundation code, because the same code in regular HTML without Ember works.
I checked out these solutions, but neither worked for me (the first is still in place in my code).
My code can be found here, with index.html using Ember and grid.html not using Ember.
If you have any insights or questions, please let me know.
The dropdown hover behaviour comes from CSS. Ember doesn't play a part in this bug. :)
I noticed grid.html uses CSS from the foundation website, while the index.html uses CSS from local files. I think you have mismatched versions of foundation's CSS files.
I changed the CSS link tags inside the index.html to use the one on foundation as the grid.html does. That fixes the problem.
<!--<link rel="stylesheet" href="css/normalize.css">-->
<!--<link rel="stylesheet" href="css/style.css">-->
<!--<link rel="stylesheet" href="css/foundation.css">-->
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/normalize.css">
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/foundation.css">
I would suggest downloading the working CSS from the foundation site, and customizing it from there.

Categories