I am trying to use bootstrap-select with my angular project but it does not appear at all.
My dependencies after installing the bootstrap-select package with bower:
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-material/angular-material.min.css">
And for the js files:
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.min.js"></script>
This is the only rule that is applied to the select item from the bootstrap-select css stylesheet.
select.bs-select-hidden, select.selectpicker {
display: none !important;
}
Is some of the other packages breaking it?
Thank you
My versions angular:1.6.2, bootstrap:3.3.7, bootstrap-select:1.12.2
I had the same problem recently, what i did was:
1) Download Bootstrap-select from SilvioMoreto Git;
2) Copy the bootstrap-select.js from bootstrap-select/js;
3) Paste the file in your project javascripts directory;
4) Link path to the file in your project header;
It worked for me, hope it helps!
Related
My CSS doesn't apply for my userdetails page, but applies for every other page. This is my header which includes the CSS files as well as some bootstraps. My CSS file is in \laravel-master\public\css.
<head>
<title>#yield('title')</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link type="text/css" href="css/style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
I've looked online and a lot of answers suggest adding a "/" before. I've tried adding this to make <link type="text/css" href="/css/style.css" rel="stylesheet">, but all this does is remove all CSS.
For this case you must use asset Laravel helper.
<link type="text/css" href="{{ asset(/css/style.css) }}" rel="stylesheet">
I'm using kalendae calendar in my site.When there are no other stylsheets other than kalendae's stylesheet and script src then it works properly.But when i add all of them then it behave abnormally.I also tried removing all the links one by one to see what is causing the problem but could not figure it out.It only works normally when i remove all the stylesheets and script src.Here are the two images that will make my question clear.
When i remove all stylesheets and script src
After adding them
And here are the stylesheets and script src.I'm really sorry for using so many bootstrap link but some were not doing the tasks i wanted so i added so many of them.
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="js/wheelnav.min.js"></script>
<script src="js/wheelnav.js"></script>
<script src="js/raphael.icons.min.js"></script>
<script src="js/raphael.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/Livie_ccs1.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Please help.
Here is the code for kalendae
<html>
<head>
<title>JavaScript calendar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
<div class="auto-kal" ></div>
</body>
</html>
Here is the fiddle link. https://fiddle.jshell.net/qyf96yrk/.
The Kalandae is not appearing on the fiddle though i have added the link.Also the src code is very long.That is the reason why i was not adding my code.Sorry for the onconvenience
I'm not well-versed with javascript or jQuery and I am (therefore?) struggling with integrating datatables with an HTML UI in Shiny. All the examples I can find seem to work with ui.r and not with an HTML UI.
Any example or advice on how to do this?
( I've been pointed to the excellent app at http://emoteer.com/ but I'm unable to find out how it works )
You could try something like this for the index.html
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
<script src="js/jquery.dataTables.min.js"></script>
<link href="css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="css/dataTables.extra.css" rel="stylesheet" />
<script src="js/dataTables.bootstrap.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>HTML UI</h1>
<div id="table" class="shiny-datatable-output"></div>
</body>
</html>
And in the server.R:
shinyServer(function(input, output, session) {
output$table <- renderDataTable({iris})
})
You will need to put the javascript, css and images in the www directory where the index.html is.
Edit on 13th March -
If you copy the C:\Users\<username>Documents\R\win-library\3.1\shiny\www\shared folder to the www folder inside which the index.html file is place, then the following should take care of it.
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
<link href="shared/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="shared/datatables/css/dataTables.extra.css" rel="stylesheet" />
<script src="shared/datatables/js/jquery.dataTables.min.js"></script>
<script src="shared/datatables/js/dataTables.bootstrap.js"></script>
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
</head>
I'm using VS2008 and I used more than 10 Jquery plugins in my master form and its working Perfectly but when I build my solution Its take too long time to build and its stopped working.Before I add those plugins i got no issue on Visual Studio .How do i solve this .
<link href="../AdminCss/bootstrap.css" rel="stylesheet">
<link href="../AdminCss/bootstrap-responsive.css" rel="stylesheet">
<link href="../AdminCss/styles.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- addons -->
<script src="../js/chart-plugins.js"></script>
<script src="../js/jquery.uniform.js"></script>
<script src="../js/bootstrap-datepicker.js"></script>
<!-- plugins loader -->
<script src="../js/loader.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="../js/customCalender.js" type="text/javascript"></script>
<link href="../AdminCss/Admin.css" rel="stylesheet" type="text/css" />
I am facing conflict issues in both functionalities. If I use the //for slider code above then, lightbox works and easyslider wont work and vice-versa. What is the solution to get it done ?
I am using following code in the header
//for lightbox
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
//for slider
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>