DataTables tables appear incorrectly - javascript

I am using Bootstrap 4 and I followed the example provided by DataTables on this page: link.
The code that I used is here: link
And here is how it appears:
How can I fix this?

I tried making the datatables work and I found the issue, you are using a bootstrap css link that conflicts with the one of bootstrap, use these 2 links instead to make the table work.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"/>

Related

Missing 3 recources for the Slick carousel. How do I implement those?

In the console it says that I'm missing the slick.woff, ajax-loader.gif and slick.tff.
So I've found the CDN links for all these 3, but I have no idea how to implement them in my code (or in what kind of tag).
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.woff
The resources you've mentioned that are failing to load are referenced as relative imports in Slick's stylesheets.
Make sure that you've included these stylesheets (the first code block below) correctly, as per the Slick documentation:
Example using jsDelivr
Just add a link to the css file in your <head>:
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css"/>
Then, before your closing tag add:
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.min.js"></script>

Bootstrap js with kendo Conflicting

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

I can't make SmartWizard Jquery 4 to work with Bootstrap 4

I'm new to StackOverflow and I would like to ask if someone can help me fix my code. I can't make SmartWizard jquery 4 to work. I absolutely copied every line of code (except the sources of the css and js files) yet it still doesn't work. I'm sorry but I don't know what's wrong, I'm just a newbie in coding and I hope that you can help me understand this little problem.
I will attach my source code and images here.
Code from Jquery SmartWizard that I wish to copy is from http://techlaboratory.net/smartwizard. Download the Zip file and open the index.html file under examples folder of the zip file.
Here is the output of the code I wish to copy:
Output of the code I wish to copy
Here is my source code.
<!DOCTYPE html>
<html>
<head>
<title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Only difference is i'm using Bootstrap 4 -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"/>
<link href="/sample2/resources/css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
//the same as the code in index
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
</body>
</html>
Here is my project folder architecture: project folder architecture
Here is the output of my code: My output
Once again I'm sorry I'm just a newbie in coding and thank you for replying to my question.
EDIT: I just found out that Jquery SmartWizard 4 is not compatible / does not work with Bootstrap 4 based on the comments but someone made it work with,as the commenter said, "It works after modifications. I still have small problems to solve. Thanks". Does anybody know how to make Jquery SmartWizard 4 work with Bootstrap 4? Thanks a lot!
EDIT2: I made it work with Bootstrap 4 now and here is what I did:
Changed this line of code:
From:
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
In this syntax it fetches this version of SmartWizard Jquery SmartWizard 4.2.2 is being fetched.
To:
<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
In this syntax it fetches the latest version of SmartWizard Jquery SmartWizard 4.3.1 is being fetched.
Now my question is how come the extra slash made a difference on how the SmartWizard fetches its version, I would love to know why. Thanks a lot! But now I'm able to make Jquery SmartWizard 4.3.1 work with Bootstrap.
To make Jquery SmartWizard 4 work with Bootstrap 4, I had to change lines of code
From:
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
To:
<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
I did the same for the css files so it looks like this now
<link href="/sample2/resources//css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
to use the minified version since when I used the minified version but the syntax of the link is "/sample2/resources/css/smart_wizard.min.css" the document fetches the SmartWizard v4.x version. I absolutely don't know why this happens ,where adding an extra slash after resources changes the version that is being used, so if anyone can provide answers to it that would be great! Thanks a lot! Cheers!

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?

jqGrid overlay disabling the rest of my page

I'm having a problem with jqGrid disabling the rest of my page. In other posts it says people forgot to load the specific jqGrid .css but I think I do have that one actually loaded. The grid is styled with a themeroller.
I import the following css
<link rel="stylesheet" href="/src/css/ui.jqgrid.css">
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css">
<link rel="stylesheet" href="css/main.css">
This all makes it I cant access / click my other controls:
Can anybody tell me what I'm missing?
Thanks in advance,
Sander
Added: $('#lui_grid').removeClass('ui-widget-overlay jqgrid-overlay'); after the JQGrid initialization. It's fixed now.

Categories