I have this problem.
My menu is not showing correctly, the grid is hidding some options.
What could be the problem??
I am using this imports :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/ecmascript" src="js/jquery.js"></script>
<script type="text/ecmascript" src="js/grid.locale-en.js"></script>
<script type="text/ecmascript" src="js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="js/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/ui.jqgrid.css" />
I found it.
Change the ui.grid.css
Erase the z index: 101 at class .ui-jqgrid .ui-jqgrid-bdiv
Erase the position:relative in class .ui-jqgrid .ui-jqgrid-view
Fixed, now it displays correctly
Related
I've spring boot app with some static resources serving through thymeleaf as follows
Head section
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Home | Connect In</title>
<!-- Vendor CSS -->
<link th:href="#{/vendors/bower_components/animate.css/animate.min.css}" rel="stylesheet"/>
<link th:href="#{/vendors/bower_components/sweetalert/dist/sweetalert.css}" rel="stylesheet"/>
<link th:href="#{/vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css}"
rel="stylesheet"/>
<link th:href="#{/vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css}" rel="stylesheet"/>
<link th:href="#{/vendors/bower_components/lightgallery/dist/css/lightgallery.min.css}" rel="stylesheet"/>
<!-- CSS -->
<link th:href="#{/css/app_1.min.css}" rel="stylesheet"/>
<link th:href="#{/css/app_2.min.css}" rel="stylesheet"/>
</head>
At end of page
<!-- Javascript Libraries -->
<script th:src="#{/vendors/bower_components/jquery/dist/jquery.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/bootstrap/dist/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/Waves/dist/waves.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bootstrap-growl/bootstrap-growl.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/sweetalert/dist/sweetalert.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/lightgallery/dist/js/lightgallery-all.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/autosize/dist/autosize.min.js}" type="text/javascript"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script th:src="#{/vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js}" type="text/javascript"></script>
<![endif]-->
<script th:src="#{/js/app.min.js}" type="text/javascript"></script>
this app works fine on local host server environment, means all resources are well served, but when I deploy the app on openshift, I get errors which can be seen in this snippet
don't know how can I fix this, any recommendation and suggestion is strongly welcome..
by using cdn it solved the issues, you can change
Head section
<!-- Vendor CSS -->
<link th:href="#{https://bowercdn.net/c/animate.css-3.5.2/animate.min.css}" rel="stylesheet"/>
<link th:href="#{https://bowercdn.net/c/sweetalert-1.1.2/dist/sweetalert.css}" rel="stylesheet"/>
<link th:href="#{https://bowercdn.net/c/material-design-iconic-font-2.2.0/dist/css/material-design-iconic-font.css}"
rel="stylesheet"/>
<link th:href="#{https://bowercdn.net/c/malihu-custom-scrollbar-plugin-3.1.5/jquery.mCustomScrollbar.min.css}" rel="stylesheet"/>
<link th:href="#{https://bowercdn.net/c/lightgallery-1.3.9/dist/css/lightgallery.min.css}" rel="stylesheet"/>
At end section
<!-- Javascript Libraries -->
<script th:src="#{https://bowercdn.net/c/jquery-3.2.1/dist/jquery.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/bootstrap-3.3.7/dist/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/malihu-custom-scrollbar-plugin-3.1.5/jquery.mCustomScrollbar.concat.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/waves-0.7.5/dist/waves.min.js}" type="text/javascript"></script>
<script th:src="#{https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.6/bootstrap-growl.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/sweetalert-1.0.1/dist/sweetalert.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/lightgallery-1.3.9/dist/js/lightgallery.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/autosize-3.0.21/dist/autosize.min.js}" type="text/javascript"></script>
Hence the issues are solved...
Thank you.
it works on win7, but I am on win8 with firefox 38.0.1 (latest). I can't click on "/checkout/onepage/" button. It does work with chrome though..
Does anyone know what's going on ?
Thanks.
Oddly enough, the problem was solved by reparing firefox...
Create a new .js file for eg. no-conflict.js and add the following content on it:
var $j = jQuery.noConflict();
And include your no-conflict.js into your theme page.xml file
<action method="addJs"><script>no-conflict.js</script></action>
Then write your jQuery like as follows
$j(document).ready(function(){ // write your code here });
after including this file into your theme, press ctrl+U and view page source. Is all links are working of jQuery. If not then check the path and do correct them.
Looks like your javascript is not loading, either permissions errors or the files are inaccessible somehow. This is the head of the checkout/onepage of my install of 1.8. Note that I can open any of the scripts in a new tab:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkout</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="*" />
<link rel="icon" href="http://ce-1.8.1.local/skin/frontend/default/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://ce-1.8.1.local/skin/frontend/default/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = 'http://ce-1.8.1.local/js/blank.html';
var BLANK_IMG = 'http://ce-1.8.1.local/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/print.css" media="print" />
<script type="text/javascript" src="http://ce-1.8.1.local/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/js.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/form.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/menu.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/translate.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/directpost.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/captcha.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/centinel.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/weee.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/styles-ie.css" media="all" />
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://ce-1.8.1.local/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
Mage.Cookies.path = '/';
Mage.Cookies.domain = '.ce-1.8.1.local';
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
optionalZipCountries = ["HK","IE","MO","PA"];
//]]>
</script>
<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script>
Currently i am working with jQuery-2.1.1, angularJs-1.3.12 and Kendo UI v2014.3.1316. i used component such as grid, drop down list and date time picker from Kendo UI. but none of these components are working except kendo grid and please find below configurations.
Please advise to fix this.
//HTML
<input type="text" name="DTEndDate"
kendo-date-picker
k-format="'MMMM yyyy'"
k-options="monthSelectorOptions">
//Js
<!--//Kendo-->
<script src="assets/libs/kendo/2014.3.1316/js/kendo.all.min.js"></script>
<script src="assets/libs/kendo/2014.3.1316/js/kendo.aspnetmvc.min.js"></script>
<script src="assets/libs/kendo/2014.3.1316/js/kendo.timezones.min.js"></script>
//CSS
<!-- KENDO CSS-->
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.dataviz.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.dataviz.default.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.metro.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.dataviz.metro.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.default.mobile.min.css" />
The advice is to use a compatible version of jQuery, i.e. 2.0.x. Your version is simply untested and thus not supported.
i having a wired issue with TB and MVC3 in this fidel working exemple it use TB v2.0.2
but in my mvc3 project im using TB v2.1.1 and the collapse dont work...
this is all the scripts reference
<html>
<head>
<meta charset="utf-8" />
<title>MainSearch</title>
<script src="/Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/datepicker/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="/Content/DataTables/media/css/DT_bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/Content/boostrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js" type="text/javascript"></script>
<script src="/Scripts/DataTable.js" type="text/javascript"></script>
<script src="/Scripts/jQuery.dataTables.min.js" type="text/javascript"></script>
<script src="/Scripts/DataTable.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap-collapse.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/Scripts/DT_bootstrap.js" type="text/javascript"></script>
</head>
thanks
miki
i solved it by changing the JS/CSS order
i guess the best practice should be JQUERY should be first than the Main bootstrap Js than the other bootstrap Js extension
<script src="#Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-collapse.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/datepicker/css/datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/boostrap/css/bootstrap.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jQuery.dataTables.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-datepicker.js")" type="text/javascript"></script>
I am unable to make CLEditor work for me. Please find the scipt files being adding in _Layout.cshtml
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/jquery.cleditor.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.cleditor.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.cleditor.min.js")" type="text/javascript" ></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
#Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css"));
Partial View has given below code.
<textarea id="input" name="input"></textarea>
<script type="text/javascript">
$("#input").cleditor();
</script>
This is happing in all the browsers.
Per their site, "It is recommended that you install these files into a folder called cleditor with a subfolder called images."
I placed the folder in Scripts and then used this:
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Scripts/cleditor/jquery.cleditor.css")" />
<script type="text/javascript" src="#Url.Content("~/Scripts/cleditor/jquery.cleditor.min.js")"></script>