I am using bootstrap-select from here
the select i am getting is:
the original-select i want is(and supposed to get is):
the difference is in the background(although it is very subtle).
Mine has a button feel, which i dont want. i want it to be plain like the 2nd one.
How do i achieve that?
You can see the plunkr demo here
Code is given below:
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-animate.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
   
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript" src="bootstrap-select.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
</body>
Thanks in advance
Just remove the optional theme
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
see plunkr
Related
there is a completed project with a calendar for the whole year with drag and drop.FullCalendar
Where it is necessary to change and on what that month looked here and filling of action occurred so, butnot so
I will be glad of any help
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="fullcalendar.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/ru.js"></script>
<script src="fullcalendar.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
I have added bootstrap using nuget package . Added link to the bootstrap stylesheet but glyphicons are not loading .Please help.
`
<!DOCTYPE html> <html> <head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-route.js"></script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<script src="../scripts/jquery-3.3.1.js"></script>
<script src="../scripts/bootstrap.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" /> <meta charset="utf-8" /> </head> <body ng-app="moviesList">
<h1>Movie List Application</h1>
<span class="glyphicon glyphicon-star"></span>
<div ng-view>
</div> </body> </html>
`
Try to load your css in header and js in footer section
And use maxcdn links for bootstrap
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="utf-8" />
</head>
<body ng-app="moviesList">
<h1>Movie List Application</h1>
<span class="glyphicon glyphicon-star"></span>
<div ng-view></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-route.js"></script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
I am making a web app in flask and use bootstrap for my front end. The external CSS file is located on /static of the application. The problem is the properties in the external CSS do not apply to the elements.
form.html
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>
form.html
<div class="jumbotron">
<div class= "container">
<h1>Application</h1>
</div>
</div>
style.css
.jumbotron {
background-color: #191970;
height: 100px;
}
(I can't comment yet so...) From Configuring Flask to correctly load Bootstrap js and css files
Try using:
<link href="{{ url_for('static', filename='scripts/bootstrap/dist/css/bootstrap.css') }}" rel="stylesheet">
The pattern they said here is:
{{ url_for('static', filename='path/inside/the/static/directory') }}
Try solving in this way:
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="{{ url_for('static', filename='stylesheets/style.css') }}" rel="stylesheet" type="text/css">
</head>
assuming you have a folder "stylesheets" located inside the static folder, which contains the file style.css
I'm using Material Design and Angularjs, but the display is random.
It seems sometime that the material-lite.css is loaded at time, sometimes not.
Index.html :
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<!-- META TAG -->
<link rel="stylesheet" href="styles/material.indigo-deep_purple.min.css"/>
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/autocomplete.css">
<link rel="stylesheet" href="styles/ngDialog.min.css"/>
<link rel="stylesheet" href="styles/ngDialog-theme-default.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body ng-app="tdcWebappApp">
<div ng-view=""></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/ngDialog/js/ngDialog.min.js"></script>
<script src="scripts/material.min.js"></script>
<script src="scripts/autocomplete.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
singin.html :
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header" >
<main class=" mdl-layout__content mdl-color--grey-100 ">
<form>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
Identité
<a href="#registration" class="mdl-tabs__tab" >Adhésion</a>
Activités
Règlement
</div>
<div class="mdl-tabs__panel is-active" id="identity">
...
</div>
...
</div>
</form>
</main>
</div>
Please, can you explain to me what is the mecanism ?
Thanks
If you add an Element after windows.load you have to upgrade the dom manually because material-design-lite does not know that there are new elements. material-lite adds a global object named componentHandler. Simply do this after you added a new material-lite element.
componentHandler.upgradeDom();
//OR
componentHandler.upgradeElement(element);
material-design-lite code
I'm kind of new to Foundation and I'm trying to create a top bar, but my code does not create the top bar for me. Can you help??? I've reviewed the documentation for the top bar, but I'm still stuck.
Thank you in advance.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<!--<div class="row">
<div class="meduim-6 columns"><img src="http://placehold.it/300x100"></div>
</div>-->
<div class="contain-to-grid sticky">
<nav class="top-bar" >
</nav>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation({
topbar : {
custom_back_text: false,
is_hover: false,
mobile_show_parent_link: true
}
});
</script>
</body>
</html>
Thank you in advance.
Your app.css and app.js are missing
<head>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!-- Custom Modernizr -->
<script src="javascripts/foundation/modernizr.foundation.js"></script>
</head>
<body>
<!-- jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- JS Files-->
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>