The dropdown arrow of Jquery-UI Combobox is not looking like they promised.
I have downloaded all the Jquery-UI code from their website and included in my websites directory.
<head>
<title>TAT Dashboard</title>
<link href="dist/css/customStyle.css" rel="stylesheet">
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<link href="dist/css/funnelStyles.css" rel="stylesheet">
<link href="dist/css/uploaderStyles.css" rel="stylesheet">
<link href="dist/css/dropdownStyles.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<link href="dist/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<link href="dist/jquery-ui-1.12.1/jquery-ui.structure.css" rel="stylesheet">
<link href="dist/jquery-ui-1.12.1/jquery-ui.theme.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Jquery UI JavaScript -->
<script type="text/javascript" src="dist/jquery-ui-1.12.1/jquery-ui.js"></script>
<!-- Resources for charts-->
<script type="text/javascript" src="dist/js/d3.js"></script>
<script type="text/javascript" src="dist/js/d3-funnel.js"></script>
<script type="text/javascript" src="dist/js/funnelScript2.js"></script>
<script type="text/javascript" src="dist/js/dropdown.js"></script>
</head>
Observer the arrows.
They should be of the same size as the textbox.
I expected this -> https://imgur.com/t4kJJ8K
But I am getting this -> https://imgur.com/qMqlX4U
Try setting line-height of the icons:
.icons{line-height: 20px;}
I did this by reordering the declarations & removing some redundant ones to avoid clashes.
#ross has helped in critically thinking the problem in hand. Here is the declaration.
<link href="dist/css/customStyle.css" rel="stylesheet">
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<link href="dist/css/funnelStyles.css" rel="stylesheet">
<link href="dist/css/uploaderStyles.css" rel="stylesheet">
<link href="dist/css/dropdownStyles.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="dist/js/dropdown.js"></script>
<!-- Resources for charts-->
<script type="text/javascript" src="dist/js/d3.js"></script>
<script type="text/javascript" src="dist/js/d3-funnel.js"></script>
<script type="text/javascript" src="dist/js/funnelScript2.js"></script>
<script type="text/javascript" src="dist/js/dropdown.js"></script>
Related
I'm trying to use JQuery UI slider in on of my carousel's items.
I attached JQuery UI files (css and js) and it's not showing up.
$("#slider").slider();
<div id="slider"></div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
the link and script are at the bottom of my body tag. tried to move them to head and still not working.
The console shows:
jquery-3.3.1.slim.min.js:2 jQuery.Deferred exception: $(...).slider is not a function TypeError: $(...).slider is not a function
head tag:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>-->
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jScripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<!--<link href="Style/reset.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" />-->
<link href="styles/myStyle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
You must define jquery-UI first.
When you calling $("#slider").slider();
'.slider()' function is not exist yet
Try to include jquery-UI library first.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>
$("#slider").slider();
I don't understand how are all the CSS and JS injected.
I find asset tags in main.gsp, but only for application.css and application.js
Nothing in the GSPs generated for the domain-classes.
But in the sources of the served pages I find them all:
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
and
<script type="text/javascript" src="/assets/jquery-2.2.0.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
I red, that I can control them globally with includes and excludes.
Can I control them in main.gsp?
And where I'd decide them on a per page basis?
Thanks, Rawi
Using this plugin (http://plugins.krajee.com/file-input) for some basic file upload but it's causing me a headache design wise. Don't know what's wrong. Seem to have all required js and css files.
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/themes/base/accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/all.css" rel="stylesheet"/>
<link href="/Content/themes/base/autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/base.css" rel="stylesheet"/>
<link href="/Content/themes/base/button.css" rel="stylesheet"/>
<link href="/Content/themes/base/core.css" rel="stylesheet"/>
<link href="/Content/themes/base/datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/draggable.css" rel="stylesheet"/>
<link href="/Content/themes/base/menu.css" rel="stylesheet"/>
<link href="/Content/themes/base/progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/selectmenu.css" rel="stylesheet"/>
<link href="/Content/themes/base/slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/sortable.css" rel="stylesheet"/>
<link href="/Content/themes/base/spinner.css" rel="stylesheet"/>
<link href="/Content/themes/base/tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/theme.css" rel="stylesheet"/>
<link href="/Content/themes/base/tooltip.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/cldr.js"></script>
<script src="/Scripts/cldr/event.js"></script>
<script src="/Scripts/cldr/supplemental.js"></script>
<script src="/Scripts/cldr/unresolved.js"></script>
<script src="/Scripts/globalize.js"></script>
<script src="/Scripts/globalize/message.js"></script>
<script src="/Scripts/globalize/number.js"></script>
<script src="/Scripts/globalize/plural.js"></script>
<script src="/Scripts/globalize/date.js"></script>
<script src="/Scripts/globalize/currency.js"></script>
<script src="/Scripts/globalize/relative-time.js"></script>
<script src="/Scripts/globalize/unit.js"></script>
<script src="/Scripts/bootbox.js"></script>
<script src="/Content/bootstrap-fileinput/css/fileinput.min.css"></script>
<script src="/Content/bootstrap-fileinput/themes/gly/theme.js"></script>
<script src="/Scripts/plugins/canvas-to-blob.min.js"></script>
<script src="/Scripts/plugins/purify.min.js"></script>
<script src="/Scripts/fileinput.min.js"></script>
<script src="/Scripts/plugins/sortable.min.js"></script>
I'd purchased this Metronic Theme and I'm trying to implement it in VS 2013 ASP.NET MVC. I did tried but all went wrong, is there any one who can guide me with this
Just put blank page content to _Layout.cshtml.
For example i copied Assets to under Content folder so i changed link like that:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#*#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")*#
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/Content/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/Content/assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />
and javascripts are below the page (just before closing body tag):
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)*#
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="~/Content/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="~/Content/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script src="~/Content/assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/demo.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function () {
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
});
</script>
<!-- END JAVASCRIPTS -->
and to show views content in layout put RenderBody here:
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-12">
#RenderBody()
</div>
</div>
<!-- END PAGE CONTENT-->
You can check http://www.aspnetzero.com/
It's an ASP.NET Startup project which uses Metronic as UI theme.
It's not a simple startup template but also a strong architecture and framework.
can you guys tell me why my slider is not working
i have included all the resources in the js fiddle then also its not working
providing fiddle link below
http://jsfiddle.net/YakV7/2/
actual demo
http://tympanus.net/Development/ParallaxContentSlider/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
What do you mean by these lines?
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Change it to the actual path.
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/style.css">
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
Or add:
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
Same working fiddle: http://jsfiddle.net/YakV7/7/