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.
Related
I'm using the following external files in my website:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<button disabled>Disabled</button><br>
<button>Not Disabled</button>
Before adding bootstrap+bootbox, my buttons worked as intended, being grayed out when disabled. But now all of my buttons always look the same, whether enabled or disabled.
I've noticed that my button visuals work again, if I don't include the bootstrap3.3.7.min.css. But that also completely breaks any custom popups that are based on bootstrap.
According to the bootbox website I'm using compatible library versions, so I don't know what could cause this behavior.
You are going to want to use class btn if you are using bootstrap so buttons can be visually disabled when disabled.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<button class="btn" disabled>Disabled</button><br>
<button class="btn">Not Disabled</button>
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 believe i have everything coded right ,as Dreamweaver shows no Syntax errors, however the fullcalendar UI is not displaying either in Dreamweavers' preview pane, it does however display the div, or in Mozilla Firefox.
<!doctype html>
<html>
<head><link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<script src="fullcalendar/fullcalendar.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/moment.min.js"></script>
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
all files are local
Dreamweaver CC 2014 1.1 and Firefox 36.0.4
You are missing one css file fullcalendar.print.css please include it. you can use the cdn path //cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css
Check console there might be error of jquery not defined. Include the file in that case.
cdn path https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js
For full download fullcalendar Click here..
Include your files in this sequence.
Moment js
jQuery js
Fullcalendar js
P.s: And make sure each of the file is included properly.
I have created a jsfiddle link on the left menu click on external sources. Click here for jsfiddle
I'm trying to use the AngularJS ngDialog add-on to make a simple pop-up dialog. It basically works, but when the dialog appears, it starts out white but then quickly fades into the dark background. I assume there's some CSS conflict, but I can reproduce the problem with a very simple bit of HTML, below. Thanks in advance for any suggestions.
<html>
<head>
<title>Dialog Test</title>
<link href='/assets/ngDialog/css/ngDialog.css' rel='stylesheet'>
<script src='/assets/angularjs/angular.js'></script>
<script src='/assets/ngDialog/js/ngDialog.js'></script>
<script>
angular.module('dialogTest', ['ngDialog']);
</script>
</head>
<body ng-app='dialogTest'>
<button ng-dialog='MY_DIALOG.html'>
Dialog...
</button>
</body>
</html>
I figured it out (my original problem, not plunker): I also need to include ngDialog's ngDialog-theme-default.css. Thanks for looking at this.
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