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.
Related
I use laravel 8, I'm creating a blog. The problem is when i click one of my posts for seeing the single blog page, the page don't come due to problem to see all the css.
'''
<!-- Bootstrap Css -->
<link rel="stylesheet" href="{{url('css/bootstrap.min.css')}}">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="{{url('css/font-awesome.min.css')}}">
<!-- Slick Nav CSS -->
<link rel="stylesheet" href="{{url('css/slicknav.min.css')}}">
<!-- Cube Portfolio CSS -->
<link rel="stylesheet" href="{{url('css/cubeportfolio.min.css')}}">
<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="{{url('css/magnific-popup.min.css')}}">
<!-- Fancy Box CSS -->
<link rel="stylesheet" href="{{url('css/jquery.fancybox.min.css')}}">
<!-- Nice Select CSS -->
<link rel="stylesheet" href="{{url('css/niceselect.css')}}">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="{{url('css/owl.theme.default.css')}}">
<link rel="stylesheet" href="{{url('css/owl.carousel.min.css')}}">
<!-- Slick Slider CSS -->
<link rel="stylesheet" href="{{url('css/slickslider.min.css')}}">
<!-- Animate CSS -->
<link rel="stylesheet" href="{{url('css/animate.min.css')}}">
<!-- Radix StyleShet CSS -->
<link rel="stylesheet" href="{{url('css/reset.css')}}">
<link rel="stylesheet" href="{{url('style.css')}}">
<link rel="stylesheet" href="{{url('css/responsive.css')}}">
<!-- Radix Color CSS -->
<link rel="stylesheet" href="{{url('css/color/color1.css')}}">
<link rel="stylesheet" href="#" id="colors">
'''
[What my single blog page looks like ][1]
if i don't use the stylesheets 'reset.css' it looks like :
single blog page without stylesheet reset.css
You can use asset helper instead of url
<link rel="stylesheet" href="{{asset('css/reset.css')}}">
CSS File path is true but still couldn't found..
CSS File Path;
public/assets/demo/default/base/style.bundle.css
In Blade;
<link href="{{asset('assets/demo/default/base/style.bundle.css')}}" rel="stylesheet" type="text/css" />
Where do I mistake ?
the second assets shouldn't be needed if your css is in resources/assets.
<link href="{{asset('demo/default/base/style.bundle.css')}}" rel="stylesheet" type="text/css" />
When i am including the file head.blade.php in views.home, JS and Bootstrap are working properly. But when i am trying to include head.blade.php in views.posts.create JS and bootstrap are not working. I found in previous questions that i shoult include them like that:
<link rel="stylesheet" href="rel="stylesheet" {{URL::asset('css/responsive.css')}}"> but didn't helped.
This are my routes:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
how it is
How should be
Try adding a / to the front of your url:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/animate.min.css" rel="stylesheet">
<link href="/css/prettyPhoto.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="/css/responsive.css" rel="stylesheet">
Note: folder path should be "project/public/css/"
This can also be done with the url() helper function:
<link href="{{ url('/css/responsive.css') }}" rel="stylesheet">
Take a look at the Laravel URL helper functions documentation for more information.
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
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>