I started integrating jquery ui datepicker in my page.
I included the js files:
jquery-1.5.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
and CSS Files:
jquery.ui.datepicker.css
But it resulted out datepicker without the background...
what am i missing on it?
After i manually add :
.ui-datepicker{background-color: silver;}
it shows like:
http://outsourcingnepal.com/general-images/shot1.jpg
Check the datepicker.css if there is style definition for the element with missing background. If not..just check the element in firebug (or similar tool) and add your own style. There probably will be already a class, so just add your style in your stylesheet, or add it into detepicker.css.
Got it solved unpackaing all the files once more... i hope some files were missing
For styling only the DatePicker, these are the necessary stylesheet files:
~/Content/themes/base/jquery.ui.core.css
~/Content/themes/base/jquery.ui.datepicker.css
~/Content/themes/base/jquery.ui.theme.css
or the minified ones:
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.core.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.theme.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.datepicker.min.css" />
Related
I'm experiencing a peculiar issue and I'm having trouble diagnosing it.
I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as a bi-product.
The markup looks like this.
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/site.less" rel="stylesheet" />
<script src="~/Scripts/less-1.5.1.min.js" type="text/javascript"></script>
I am seeing the files correctly delivered to the browser (from Network tab)
There are NO errors in the console.
but when I inspect my element, I see this:
The styles from bootstrap.css are applied as expected.
Am I missing a step? I've used less with ASP.NET before, this one's got me stumped.
Thanks!
Solved. This issue was that the link tag that references the less files had an incorrect rel attribute. For less it should be stylesheet/less as opposed to just stylesheet, which is used for CSS.
<link href="~/Content/site.less" rel="stylesheet/less" type="text/css" />
When i was try implement angular ui-grid, I am geeting this error. some help me to sort this problem.
My first guess:
To import css you should use this line:
<link rel="stylesheet" href="styles/ui-grid-unstable.min.css" />
in your index.html.
I guess you import it as Javascript which will not work.
Any object I try to apply the .selectable() I get the following error:
Object doesn't support property or method 'selectable'. Assuming this is happening because the selectable ui feature wasn't downloaded when I made my custom jquery-ui-1.9.2.custom.js script, I opened my jquery-ui-1.9.2.custom.js file and sure enough at the top the selectable feature is not shown
* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.draggable.js, jquery.ui.resizable.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.tooltip.js
I downloaded the full jqueryui (1.9.2) package, opened selectable.js and copied the contentents and pasted them into my custom jquery script. I still get the same error. I tried closing/opening Visual Studio and doing a rebuild.
Here is how I'm attempting to apply the selectable UI property.
$("#myList").selectable(); //apply to <ol> object
Here is how I'm loading the script in my page:
<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.9.2.custom.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Scripts/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
Thank for looking.
I'm having an issue with the bundling and minification feature of ASP.NET MVC 4 Basically I have the following bundle setup:
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.min.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
when they are placed on the page they come out like so:
<link href="/backendContent/assets/jui/css/jquery-ui.css" rel="stylesheet"/>
<link href="/backendContent/assets/jui/jquery-ui.custom.css" rel="stylesheet"/>
<link href="/backendContent/plugins/uniform/css/uniform.default.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/fonts/icomoon/style.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/main-style.css" rel="stylesheet"/>
<link href="/backendContent/plugins/pnotify/jquery.pnotify.css" rel="stylesheet"/>
<link href="/backendContent/plugins/msgbox/jquery.msgbox.css" rel="stylesheet"/>
<link href="/backendContent/IntroJS/css/introjs.css" rel="stylesheet"/>
First problem is that the Tilda ~ is not coming in the beginning of the link and I think that's one of the problems (site not rendering properly) now all of the above css stylesheets are resolving but there are a lot of imports and relative urls (images) and I think those are getting messed up (without the bundles, if I just point to ~/backendContent/.... everything is working just fine
Second problem is that when I set BundleTable.EnableOptimizations = true; there are a lot more problems and digging deeper I get a huge list of
(4368,1): run-time error CSS1019: Unexpected token, found '#import'
(4368,9): run-time error CSS1019: Unexpected token, found 'url("layout.css")'
I don't know if this is important but the minified and rendered style link produced by #Styles.Render("~/backendcss") is:
<link href="/backendcss?v=eMX6YcVB78xPWZV9Dw6seHqsT742J8_M1irfUC0IdaQ1" rel="stylesheet"/>
Any Ideas? I'm sorry but this is the first time I'm using this feature and with this site having so many css and js it would save a lot of bandwidth and speed up the whole site. Plus its just plain cool (that is if I can get it to work)!!!
The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application
I'm not sure why you are having issues with the actual minification, but that'd be pretty hard to diagnose without the source.
The link when optimized should look like that. the ?v=xxx at the end is for cache busting so that people get the updated css when you change the css files.
I think for minification to work you need to add in global.asax file
BundleTable.EnableOptimizations = true;
Also can you try to create different groups of for example keeping jqueryui separate from bootstrap and so on.
Darren Kopp is right "The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application"..
And don't use ".min" because when you set BundleTable.EnableOptimizations = true; it will be minimize your files.. So it should be like this;
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
When using the jquery fullcalendar plugin (http://arshaw.com/fullcalendar/) with jquery mobile, the prev and next month button icons only show the arrow-up background image, which is the very first icon on the long 256 by 240 .png image file. When I refresh the page in Firefox, the correct arrow east and west show up, yet I lose all other styles including background, themes, etc. Refresh does not work in IE.
I searched high and low for an answer to this relatively minor issue. Here I believe may be the causes:
1. jquery ui and jquery mobile conflict (order of .js and .css files) --I tried all orders to no avail.
2. calling fullcalendar theme on mobile page (inside of page instead of head tags)
3. transition issue from home to specific mobile page
4. pixel size of ui-icon css class (should it be larger than 16px by 16px for mobile?)
5. need of a custom override of jquery ui using the $(document).ready() function.
Please see my included files head code below:
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar/fullcalendar.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/demos/cupertino/thememobile.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar/fullcalendar.print.css' media='print'>
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type='text/javascript' src='../fullcalendar/jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/jquery/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/jquery.qtip-1.0.0-rc3.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/calendareventsmobile.js'></script>
Any answer or brainstorming of answers will be very helpful.
Thanks in advance!
Have you tried using the FullCalendar with the theme option set to true? This forces it to use the jQuery UI theme instead of the fullCalendar theme. Maybe the CSS conflicts might go away then.
From the documentation...
A hash must be supplied that maps button names (from the header) to icon strings. The icon strings determine the CSS class that will be used on the button. For example, the string 'circle-triangle-w' will result in the class 'ui-icon-triangle-w'.
I was looking to use ui-icon-carat-1-w and ui-icon-carat-1-e. I found firebug to be very helpful in determining the correct hash value to use to get the proper mapping.
This is an example of what I needed to use.
buttonIcons: {
prev: 'carat-1-w',
next: 'carat-1-e'
},