I have a Vb.net MVC application that utilises Kendo UI (in the Bootstrap theme). I was told I had too many/conflicting css and js files declared but I'm struggling to figure out what my minimum requirements are. I'm also aware I may have some in the wrong order. I tried to fix this but have now managed to cause all dropdowns to display object [object] instead of the selected value.
I have the following declared...
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.mobile.common.min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.bootstrap.mobile.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.mobile.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.aspnetmvc.min.js")"></script>
Any help appreciated as I have no backup of the file before I started 'messing' and now do not know what was there originally and in which order. :(
All the help you need is here : http://www.telerik.com/blogs/which-css-files-to-use-in-your-kendo-ui-project
After reading the article, I am still not sure that if you use kendo.mobile, you still need kendo.common for the css and kendo.all.min for the js if your application is also desktop.
Related
<link rel="stylesheet" href="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<link rel="stylesheet" href="mileTracker.css">
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"></script>
<script src="mileTracker.js"></script>
<header data-role="header" data-theme="b">
<h1>Tracker</h1>
</header>
This is code that I have and I just can't seem to get the theme to be applied to the html code.
I have found a solution that allows for the set-up to work, the css links were added after the jQuery mobile css link.
Also when using the jQuery links, the mobile css file was placed first followed by the 2 javascript files, first the jquery.min.js then the jquery.mobile.1.4.5.min.js.
With the js files they were added after the css and in the order listed below.
Also I used a local deployment.
<link rel="stylesheet" type="text/css"
href="jQuery/jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
I am working on a new project on React JS. I decide to use a HTML & CSS free theme template for my project. I found the two best theme templates for the frontend (visible to the public) and the admin panel (CMS). I add both the css and js script link to my React project. When I start the project, the design of the frontend becomes buggy. I cannot get the actual design of the template. It has completely changed my design. When I commented the admin theme css & js, then i get actual output of the frontend and vice versa. If I activate css & js for both the frontend and the admin then the design get buggy. Can anyone please suggest me how to solve this issue?
index.html
Frontend CSS
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/socicon/css/socicon.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/slick/slick.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/unicore/css/style.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/dropdown-menu/style.light.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/mob-slider/style.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/mob/css/mbr-additional.css" type="text/css" />
Frontend JS
<script src="%PUBLIC_URL%/frontend/assets/web/assets/jquery/jquery.min.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/smooth-scroll/SmoothScroll.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/slick/slick.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/unicore/js/script.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/dropdown-menu/script.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/formoid/formoid.min.js"></script>
Backend CSS
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/vendors/mdi/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/vendors/css/vendor.bundle.base.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/css/style.css" />
Backend JS
<script src="%PUBLIC_URL%/backend/assets/vendors/js/vendor.bundle.base.js"></script>
<script src="%PUBLIC_URL%/backend/assets/vendors/chart.js/Chart.min.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/off-canvas.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/hoverable-collapse.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/misc.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/dashboard.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/todolist.js"></script>
Can anyone provide me the solution for this? How can i manage both template theme for my single project?
I am trying to incorporate the jQuery UI datepicker function into a website I'm creating, but for some reason it's showing up translucent. I've read around and aparently it's caused from not linking the css file.
I've linked all of these files in the head in this order:
jquery-ui.min.css
jquery-ui.structure.min.css
jquery-ui.theme.min.css
jquery-1.11.3.min.js
jquery-ui.min.js
They all came from when I DL'd jQuery UI (except the jQuery v1.11.3 of course)
Then, in the form area I have:
<form id="purchase">
<fieldset class="purchase">
<input type="text" id="datePicker">
</fieldset>
</form>
and then in my javascript file I have:
$(function() {
$( '#datePicker' ).datepicker();
});
The result is the date picker shows up but it is transparent. I've been staring at this for hours thinking there's something obvious I'm missing but I just can't see it. Any help would be greatly appreciated.
Theres something up with your style sheet, not sure what it is but something is inserting an empty style tag into your head, replacing it with jquery-ui.css seems to fix it. Hope fully this works in the source as well.
Change
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
To
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
I am using Bootstrap Validator(bootstrapValidator.js) for form validations. With this I added jQuery UI Multiselect component in to my bootstrap page. But this component requires 1.5.1/jquery.min.js and Bootstrap Validator requires jquery-1.10.2.min.js, Because of this two different version on the same page validator is not working. If I use only updated version of Js (jquery-1.10.2.min.js) then Multiselect component stops working. Please help....
try to add the files in the order:
js/jquery-1.10.2.min.js
js/jquery-ui.js (if file exists in the project :))
jquery.min.js (1.5.1)
js/bootstrap.min.js (if file exists in the project :))
js/bootstrapValidator.min.js (if file exists in the project :))
other js
if it does not work http://api.jquery.com/jQuery.noConflict/
Have you tried inncluding all js and css files in the head tag, and include order is critical: first include jquery library, next bootstrap, next plugin for validator. Then check your html code for errors. I found this tutoral online [http://www.jqueryscript.net/form/Powerful-Form-Validation-Plugin-For-jQuery-Bootstrap-3.html]
<head>
<!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
<title>The Transformers</title>
<link rel="icon" href="/title_icon2.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
</head>
I Have Problem With ext-3.3.1 Tree.
I use it in my project but sometimes the browser show this error and fail to load the page.
I take a picture of the errors and It's here and the html is here.
I really think it made by a bug ! anyone can help?
I hope you can help me it really made me mad.
Kind regards
The order of javascript file included in Head tag is important. the order should be like the following:
<script type="text/javascript" src="../../resources/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../resources/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../resources/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/ext/resources/css/xtheme-gray.css" />
<link rel="stylesheet" href="../../resources/openlayers/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="../../resources/app/theme/style.css" type="text/css" />
<script src="../../resources/openlayers/build/OpenLayers.js"></script>
<script src="../../resources/geoext/build/GeoExt.js"></script>