I'm trying a very simple tooltip integration in Bootstrap but getting some weird results:
<script type="text/javascript">
$(document).ready(function(){
$("[data-toggle=tooltip]").tooltip();
});
</script>
<select title="Tooltip on top" data-placement="top" data-toggle="tooltip" id="purchaseddate1-day" name="purchaseddate1-day" class="form-control"><option value="">All</option><option value="1">1</option></select>
The tooltip is 100% the width of the screen, grey background and above the element. Why isn't it small, sleek, black and above like specified?
I include the standard js and css:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet">
"Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
"
from bootstrap docs
Related
I am creating an alert box using bootstrap
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="alert alert-info alert-dismissible fade show">
Alert Read this message<button class="close" data-dismiss="alert"> Close </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
This code works in same way if I remove alert-dissmissible class for the div. If there is no change even after removing alert-dissmissible class declaration then What is the use of alert-dissmissible class? The alert box is dissmissible even if the alert box does'nt has alert-dissmissible class.Why?
The following is from the Bootstrap website
Using the alert JavaScript plugin, it’s possible to dismiss any alert
inline. Here’s how:
Be sure you’ve loaded the alert plugin, or the compiled Bootstrap
JavaScript. If you’re building our JavaScript from source, it requires
util.js. The compiled version includes this.
Add a dismiss button and
the .alert-dismissible class, which adds extra padding to the right of
the alert and positions the .close button.
On the dismiss button, add
the data-dismiss="alert" attribute, which triggers the JavaScript
functionality. Be sure to use the element with it for proper
behavior across all devices.
To animate alerts when dismissing them,
be sure to add the .fade and .show classes.
I have some tooltips on my page, created as:
<th rel="tooltip" data-toggle="tooltip" title="Text to show in tooltip">Change to date</th>
$("[data-toggle=\"tooltip\"]").tooltip();
This should show the classic black bootstrap tooltip. However, it shows a different-looking tooltip. When I inspect the tooltip element, I see that all its styles are derived from jquery-ui.css, but this shouldn't be the case because jQuery UI is loaded before Bootstrap:
<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Theme Styles -->
<link href="/valera/assets/css/bootstrap.css" rel="stylesheet">
<link href="/valera/assets/css/bootstrap-responsive.css" rel="stylesheet">
Anyone have any idea why this is?
IT's because JQueryUI has some CSS selectors that override the ones in Bootstrap. You need to override that in your CSS to make sure that it cancels out the rule in JQueryUI.
If you need any more help, you can post a link to a fiddle or codepen.
I have checked external css file doesn't work in Flask framework etc. other SO questions and my original Udemy source tutorial, but I still can't seem to get my Flask Boostrap app. to pick up my custom CSS file.
From base.jinja2 HTML template file:
{% include 'html_dependencies.jinja2' %}
</head>
<body>
Entire CSS test file in Source/static/css/style.css:
body {
background-color: yellow;
}
(This is test file, body does not change to yellow currently, therefore my CSS appears not to be loading.. I don't really want a yellow background if any style police reading!)
Complete HTML Dependencies file below code, which is loading the main bootstrap files fine, my custom CSS is last file, with url_for and static format syntax as I understand should be correct. Maybe I got the order wrong or some interference from one of Bootstrap files here? Also, I have problem with Bootstrap collapsed nav menu not functioning when window minimised, not sure if this is same cause, the standard lines in box icon shows for navigation when window is below cutoff width, but nothing happens when I click on it.:
<!-- Latest versions available at 31-8-17 -->
<!-- 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" -->
<!--Font Awesome from https://www.bootstrapcdn.com/fontawesome/ on 31/8/17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Flatly theme from bootstrapcdn.com on 31/8/17 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" 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>
<!-- do I need jquery as well for the pop-up to work? Maybe already in the JS import -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- custom changes / over-rides to Boostrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
I'm quite a Bootstrap newbie, any suggestions grateful.
I found it is the browser caching that is the problem. On the server this code works fine for me. In both IE and Chrome on my local computer, if I change the custom CSS code, it doesn't pick it up, unless I open code inspector in the browser, click on "Disable cache" option in the code inspector, and keeping code inspector window still open, then reload the localhost website. The below SO question finally sorted me out, and now I am downloading the Chrome extension Cache Killer as per second answer here, otherwise extremely irritating to have to open window and disable cache to check every change in custom CSS! Disabling Chrome cache for website development
I did also fix other mentioned error of collapsed menu issue was due to Bootstrap jQuery import line being below the Bootstrap min.js file. Opening the code inspection in browser showed this error, so moved jQuery line above js line and it loads properly.
Thanks again #senaps pointing me in right direction, confirming to me that posted code itself seems right.
I notice that when I use bootstrap in my project, some of the classes are applied to my code. Is there a way I can only use the bootstrap classes I want using CDN?
Here's the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Then below I have:
<ul>
<li>Some text here...</li>
</ul>
and when I check the chrome debugger, it inherits properties for ul:
I know I can manually force my own classes to get rid of it, but it would be tedious.
You cannot use bootstrap's CSS from CDN and only apply the styles to certain elements only.
The only way to exclude some styles is to recompile twitter-bootstrap and leave out all styles you don't want, respectively only include the one's you want.
You can download the source here.
Please note that recompiling bootstrap requires a Less compiler.
I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.
If you could help me I would really appreciate it it - a lot!
I have done this so far (mocking up the example from codecademy)
What I want:
What I did so far
Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the js/vendor folder
jquery.js (v2.1.1)
bootstrap.js (v3.1.1)
bootstrap-markdown.js (v2.5.0)
he.js (v0.4.1)
to-markdown.js (no version number)
markdown.js (no version number)
index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).
But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?
So far I can get it this way
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
Which is good. But I want to be able to access via the Post button instead.
I tried without luck:
var post;
$(".status-box").markdown( post = e.getContent() );
e represent the markdown edit only inside the onSave function.
So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)
If you want to access it inside your post click function you have to access it in this way:
get the markdown element
get the markdown instance via data('markdown')
use the parseContent function
Code:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
Demo: http://jsfiddle.net/IrvinDominin/fdpM4/
Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.
UPDATE
HI #Norfeldt,
For This you have to follow Below Instructions.
1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.
2.Maintain Correct root Directory path.
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
must be
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
3. Which version of bootstrap-markdown.js lib you are using.
Check this one
Version Compatibility with Bootstrap
Bootstrap Markdown v2.x only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x only compatible with Bootstrap 2.x
Note: Download bootstrap files from Here add add to your html file.
Change path of these js file
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
To
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Hope this will help you...