Check that plunker example:
Plunker
<body ng-app="app">
<div class="flexbox margin-top">
<div class="flexible"></div>
<div class="flexbox">
<button class="btn btn-sm btn-success" popover-template="'template.html'" popover-placement="left">Click</button>
</div>
</div>
<script type="text/ng-template" id="template.html">
<div>
<textarea>Some text, some text, some text</textarea>
<button class="btn btn-sm">Update</button>
</div>
</script>
When I click the button, popover shows up at the left top corner of the page for a short time than it goes to its correct position. How can I prevent that flicker?
A possible solution is to integrate angular-animate to enable the fade-in. Just insert <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> into the head and register the module in your script.js: angular.module('app', ['ui.bootstrap', 'ngAnimate']);
See a demo here: http://plnkr.co/edit/NJU9F9ETHe2qMczY8knl?p=preview
Hope it helps!
Related
I have multiple places in my system where I would like to show the message next to the submit button. Depends on the user activity this message is usually generic for the system like 'Records successfully saved' or 'Invalid access' or 'Invalid data entered in the form field'. With now days standards I see that message usually should be displayed next to the submit button. When i first tried to implement this in bootstrap I had the problem where alert box height is bigger than the submit button height. I was able to fix that problem by overwriting the padding on the alert box div. Here is example:
$('#frm_myform').on('click', function() {
$('#my-message').show().addClass('alert-success').html('Record successfully saved.').delay(10000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-success').dequeue();
});
});
.alert-Submit {
padding: 5px 15px !important;
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-home"></span> <b>Home Page</b></div>
<div class="panel-body">
<form name="frm_myform" id="frm_myform" class="frm-Submit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="answer">Answer</label>
<input type="text" class="form-control" name="frm_answer" id="frm_answer">
</div>
<div class="row">
<div class="col-md-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-md-11">
<div id="my-message" class="alert alert-Submit"></div>
</div>
</div>
</form>
</div>
</div>
In example you can see that I tried to use two grids to place submit button and alert box next to each other. Only thing that I would like to change is padding between two grid when alert box can't fit next to the button. In example you can see there is no space between them. This just seems ugly on the small screen and I'm wondering what would be the best way to put some space? Also I'm wondering if there is better approach to show the message in alert box next to the button in bootstrap form?
To show the alert next to the button, there is some easy css you can use to align them together:
CSS:
.align-left { float: left; }
.align-right { float: right; }
HTML:
<div class="row">
<div class="col-md-1">
<button type="submit" class="btn btn-primary align-left">Submit</button>
</div>
<div class="col-md-11">
<div id="my-message" class="alert alert-Submit align-left"></div>
</div>
<div style="clear: both;"></div>
</div>
The "clear: both;" should be placed outside of the two div's you are aligning and inside the div that the elements being aligned are within.
With the align & clear code you can place items next to each other, either against the left or right of the div depending on your class. This code does not require bootstrap to work.
I've got an odd one here guys, all I've done is include a standard YouTube subscribe button on a Bootstrap 3 modal box and on Firefox 45.0.2 the tooltip goes crazy and flashes over and over (on and off) incrementing its z index over and over again.
I've created a fiddle to demonstrate the problem.
https://jsfiddle.net/djhxLk59/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Youtube Subscribe Bootstrap 3 Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" onclick="; return false;" data-toggle="modal" data-target="#myModal">
Launch demo modal using data-toggle
</button>
<button type="button" class="btn btn-primary btn-lg" onclick='$("#myModal").modal("show"); return false;'>
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>This is a test to show how the Youtube Subscribe button doesn't work on Firefix</p>
<script src="https://apis.google.com/js/platform.js"></script>
<p><span id="youtube-follow-circle"></span>Subscribe on <span>YouTube</span>
<br />
</p>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="britneyspears" data-layout="default" data-count="default"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
You can see here that when you hover over the YouTube button the tooltip goes nuts.
This jsfiddle works fine on Chrome, Safari and Opera.
Interestingly, when I open the modal as soon as the page is loaded, as in this example:
https://jsfiddle.net/od4eo13m/
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
then the YouTube tooltip works fine!
I am so confused here, it's driving me nuts.
Would love any hints please.
Kind regards, Jason.
I have a modal set up, using Bootstrap, which is working just fine. The modal brings up some text and an image. When I hover on the modal element, a button, there is a nice blue highlight that pops up, I'd like to keep that. The issue is, when I close the modal window the blue highlight stays on the button, I'd like to get rid of this.
I thought this CSS...
.modal-open .modal,
.btn:focus{
outline: none !important;
}
...would remove the highlight, but it I'm still left with the blue highlight after I close the modal. The following is the code for the modal...
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Some Title</h4>
</div>
<div class="modal-body">
<p>Some text about something, Some text about something, Some text about something.</p>
<a href='http://codepen.io'><img src='http://lorempixel.com/g/400/200'></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks in advance for any assistance.
This is by design and is important for accessibility. On close, modals should return focus to launching element. If the button wouldn't get it's focus back it would break keyboard/tabbed accessibility. Please refer to this github issue.
If you want to remove the glow, or blue "highlight" i recommend toggling an extra CSS class on modal show/hide. For example:
<button id="openButton" type="button" class="btn btn-info btn-lg btn-no-highlight" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>
$(function(){
$('#myModal').on('hidden.bs.modal', function (e) {
$('#openButton').toggleClass('btn-no-highlight');
});
$('#myModal').on('shown.bs.modal', function (e) {
$('#openButton').toggleClass('btn-no-highlight');
});
});
.btn.btn-no-highlight {
background-color: #5bc0de;
border-color: #46b8da;
outline: none !important;
}
I have created a fiddle to demonstrate this: https://jsfiddle.net/e61r4ba3/
Try using this
$('#myModal').on('shown.bs.modal', function(e){
$('#myModaltrigger').one('focus', function(e){$(this).blur();});
});
I am newbie in jquery mobile. I got some code from the internet for follow/unfollow button and it works. But the problem is when I click the button, the button changes text but it becomes smaller than another button next to it. This is how it looks:
$(document).on('click', '.followButton', function(e) {
e.preventDefault();
$button = $(this);
if ($button.hasClass('following')) {
//$.ajax(); Do Unfollow
alert("unfollow event");
$button.removeClass('following');
$button.removeClass('unfollow');
$button.text('Follow');
} else {
// $.ajax(); Do Follow
alert("follow event");
$button.addClass('following');
$button.text('Following');
}
});
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<a data-role="button" type="button" class="btn followButton" data-role="button" data-theme="b">Follow</a>
</div>
<div class="ui-block-b">
<a data-role="button" type="button" class="btn" data-role="button" data-theme="a">Details</a>
</div>
</div>
</div>
</div>
How can I make the button remain the same size after it is clicked? Thank you.
I have a Bootstrap modal that shows for filling some data, if the data is incorrect, actually I show an alert and it appears on top.
Now I have a new requirement, create custom alert dialogs. In other parts of the form, there is not a problem, but when I have the Bootstrap modal, if I show the modal in a normal way, it appears in the bottom of the Bootstrap modal (example in this fiddle).
I've looked other questions like this and this and I've tried with z-index (example in this fiddle) and dialog shows in top, but I cannot click anywhere
$(".ui-dialog").css({ 'z-index' : 1000 });
$("#myModal").css({ 'z-index' : 0 });
Also I've tried to disable the modal and enable the dialog without success.
Is this answer correct, and there is no way I can achieve this without more plugins?
The default z-index of the bootstrap modal window as defined in the variables.less file lies at 1050.
#zindex-modal: 1050;
So if you want to place your jquery-ui dialog above that you would at least have to add a z-index value that is greater than the one of the modal window. Or change the modal window z-index to something lower, but i would not do that.
$("#btnalert").click(
function action () {
alert("this is an alert on top");
}
);
$("#btndialog").click(
function action () {
$("#dialog").html("dialog on the back");
$("#dialog").dialog();
$(".ui-dialog").css({
zIndex: '1060',
top: '100px'
});
prepareDialog();
}
);
function prepareDialog() {
$("html, body").animate({ scrollTop: 0 }, "slow");
$(".ui-dialog-titlebar").css({ background: '#F7985D' });
$(".ui-dialog .ui-dialog-content").css({ 'text-align': 'center' });
}
.ui-dialog {
/*z-index: 1060 !important;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" id="btnalert" >ALERT</button>
<button class="btn btn-default" id="btndialog" >DIALOG</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="dialog" hidden></div>
As of version 1.10.0+, you can specify in your initialization where to "append" the dialog using the appendTo option and assign it your modal id. No changing of z-indexes anymore.
$("#yourDialogId").dialog({
autoOpen: false,
appendTo: "#yourModalId",
modal: true,
});
try this one on your fiddle:
<button class="btn btn-default" data-dismiss="modal" id="btndialog" >DIALOG</button>