angular-ui-bootstrap,bootstrap-modal,angular-bootstrap , angular bootstrap modal won't appear in the front when browser is full screen on an element

angular bootstrap modal won't appear in the front when browser is full screen on an element


Tag: angular-ui-bootstrap,bootstrap-modal,angular-bootstrap

When I go full screen on an element and then try to display angular bootstrap's modal in front, it won't appear in front.

To test it:

1 - Click on this link

2 - Click on the "launch the preview in separate window" icon (image shown below)

3 - Click on Go Full Screen Button (you will then be in full screen on the element with id fullable)

4 - Then click on any of the buttons to try to show a modal.

Here is how to "launch the preview in separate window" on plnkr: enter image description here


Solution to this problem required modal window to be appended to the element of my choice (in this case, element that goes full screen).

To accomplish this, I updated the angular bootstrap modal's code so that options object we pass to the $ function now accepts an appendTo property which is a css selector that will be used by document.querySelector.

In modal code (version 0.12.1), I changed from these:

var body = $document.find('body').eq(0), 
    currBackdropIndex = backdropIndex();

$, {
            scope: modalScope,
            deferred: modalResultDeferred,
            content: tplAndVars[0],
            backdrop: modalOptions.backdrop,
            keyboard: modalOptions.keyboard,
            backdropClass: modalOptions.backdropClass,
            windowClass: modalOptions.windowClass,
            windowTemplateUrl: modalOptions.windowTemplateUrl,
            size: modalOptions.size

to these:

var body = angular.element(document.querySelector(modal.appendTo)),
            currBackdropIndex = backdropIndex();

$, {
            scope: modalScope,
            deferred: modalResultDeferred,
            content: tplAndVars[0],
            backdrop: modalOptions.backdrop,
            keyboard: modalOptions.keyboard,
            backdropClass: modalOptions.backdropClass,
            windowClass: modalOptions.windowClass,
            windowTemplateUrl: modalOptions.windowTemplateUrl,
            size: modalOptions.size,
            appendTo: modalOptions.appendTo || 'body'

I opened an issue for this on github but it was closed without resolution so I had to update my local copy. Github issue is here:

Please note: Since I am using document.querySelector for this, fix will work on browsers that support document.querySelector (almost all plus IE >= 9)


JQuery on click event on Href [duplicate]

This question already has an answer here: Event binding on dynamically created elements? 8 answers I am appending data dynamically to my table as: function myFunctionEdit() { var table = document.getElementById("nomiTable"); var len = table.rows.length; var row = table.insertRow(len); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3...

Use angular-ui timepicker as input form

I'm using angular-ui timepicker according to the example here. This is my HTML: <timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker> In the js file, I'm trying to get the value with var start_hour = { hour:new Date($scope.hour).getHours(), min:new Date($scope.hour).getMinutes() }; But it's only works if I set a new date in...

Angular and Angular UI Bootstap - Submit a form on Enter key

I am following form submission guidelines in the AngularJS documentation, however the form is not being submitted when I hit the Enter key. What do I need to do make this work? Here's my code. The important bit is that I am using ng-click to specify a handler for the...

Bootstrap modals aren't populating properly

so i have a few modals that are supposed to have their own content based off the content box they reference. When a user clicks the enlarge button(button that looks like a grey 'X') the modal should pop up with that information in it, but instead every modal just has...

How to create a chat box window using html bootstrap and angular js

My requirement is to create a facebook style chatbox window using HTML, angularJS and bootstrap. I also need to add Text to speech and voice control button on chat box and How i can minimize or maximize the chat box. Please suggest me how i can achieve this.

AngularJs - Adding Custom class on UI-Bootstrap's Tab

How can I replace or add a new class on UI-Bootsrap's Tab Nav. I'm expecting something like, <ul class="MY-CUSTOM-CLASS" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> <li ng-class="{active: active, disabled: disabled}" heading="Justified" class="ng-isolate-scope"> <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Justified</a> </li> ..... </ul> I've tried the following but, it's adding the class to the...

modal edit form wont display

using bootstrap 3.1 with mvc4. I had the modal form displaying fine, but no data in the form. Once I fixed the data populating the edit form (at least I know it hit the controller an received data), the screen is grayed but the form is not displayed. I can...

Bootstrap 3 Modal shown as full white screen

I have a nav menu which opens different remote pages on modal. It was working without a problem but I guess, recently, I changed something on the page without noticing and now all I can see is a full page white screen whichever link I click on the nav menu....

Any conflicts between UI-Bootstrap and Twitter Bootstrap?

Are there any conflicts between Angular UI-Bootstrap and Twitter Bootstrap? I am trying to avoid using jQuery-UI with AngularJS if a more Angular-friendly UI package is available. I already started with Twitter Bootstrap, so I do not wish to unload Twitter Bootstrap....

AngularJS ui-bootstrap accordion cannot access variable outside accordion in filtered ng-repeat

I am using AngularJS UI Bootstrap's accordion. I am using ng-repeat with filter inside the accordion. Now the problem is that I cannot access the filtered variable outside <accordion>. If I ditch the accordion and use simple HTML it works fine. <div ng-app="myApp"> <div ng-controller="AccordionCtrl"> <div>outside accordion{{filteredCampaigns}}</div> <input type="text" ng-model="q"...

Stop Angular UI bootstrap dropdown from closing in certain cases?

I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close. I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too. Is there a...

Unknown provider: $modalInstanceProvider <- $modalInstance in Angularjs modal

I am using angular bootstrap ui modal which is working fine but when I try to close it using modalInstance it gives above error.Here is my code var app = angular.module('LoginModule', ['ui.bootstrap']); app.controller('LoginModal', ['$scope', '$modal', function ($scope, $modal) { $scope.animationsEnabled = true; $ = function (size) { var modalInstance =...

AngularJS date validation (formats)

I could use some help. I am having input field with type="text" and ng-required="true". I am using datepicker (Angular UI Bootstrap). If my input is empty, someForm.someInput.$error returns "required":true, which is okay. If my input is filled with "someText", someForm.someInput.$error returns "date":true, which is odd to me. How is this...

Angular ng-repeat filter passing wrong index

I'm having trouble figuring out how to pass the right index number from an ng-repeat with a filter. I'm using a modal-window to edit rows in a table. The problem is I rely on the index number to make a REST call and get the correct data for my edit...

How to include only specific parts of UI Bootstrap using Grunt

I'm using the accordion, tooltips and transition components of UI Bootstrap. I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead. However, I don't want to use the...

Retrieve the date portion of date object in milliseconds

How can I get the date portion of a Date object in milliseconds in javascript? I didn't find any method to this. I was trying: var today = new Date(); var datePortion = today.toDateString(); var inMiliseconds = new Date(datePortion).getMilliseconds(); console.log(inMiliseconds); The return is always 0. See jsFiddle. What can I...

angularjs select the first value in select box

I need to highlight the first value 'fullName' in select box using angularjs. I am using angularstrap selectbox. controller, $scope.accountInfo.owners = [ { "accounts":null, "phoneumber":null, "email":null, "fullName":"MITA DASGUPTA", "mobilePhoneNumber":null, "noteFlag":false, "number":130000000484 } ] Template, <button type="button" class="btn btn-default" placeholder="Pleasae select" data-ng-model="owner.fullName" data-html="1" bs-options="owner as owner.fullName for owner in accountInfo.owners" bs-select>...

extending angular-ui-bootstrap typeahead module

I'm using angular-ui-boostrap's typeahead component to let people choose a person's name, or add a new name if their selection isn't present. Right now I modified getMatchesAsync with my own code: if(scope.matches.length < 4 || scope.matches.length == undefined){ scope.matches.push({ id: getMatchId(matches.length), label: 'Add New +', model: 'new' }); } But...

UI.Bootstrap Angular Typeahead and Firebase Array

Alright, I've tried and tried and tried to get this one right, But haven't. I am trying to use Typeahead in the UI.Bootstrap for Angular JS with a Firebase Array as the data set. Problem is, I can't get any results to show up when I type in the text...

Django: form validation errors are not being displayed when form is in a modal

I am trying to make a Django web app that will be able to add and display certain information in a database (the Agent model seen below) I have a form in a twitter bootstrap modal. When I enter valid data and submit, everything works as expected and the modal...

Can't validate a form in Bootstrap Modal using JavaScript

Using the code below I send an email, but if I leave the inputs blank it sends it anyway. I want to validate the form before sending it, to make sure that they are not blank. j( document ).on( "submit", ".form-horizontal", function() {, j(this).serialize(), function(){ //this callback is executed...

Typehead displays wrong on certain input

I am using a uiTypehead for input selection. It works well except for a simple fact. My inputs always have the form like {name: "Las Vegas McCarran International (LAS)<span class="country">United States</span>", iata: "LAS"} So I insert <span class="country">...</span> from my backend into the string. When I then type in "veg"...

Angular radio button doesn't pick an initial value

I have a radio button with two available values - male and female when the value of male is true and female is false. <div id="gender" class="btn-group"> <label class="btn btn-success" ng-model="userDetails.gender" btn-radio="true" uncheckable>Male</label> <label class="btn btn-success" ng-model="userDetails.gender" btn-radio="false" uncheckable>Female</label> </div> In the controller code, I get the existing value in...

How to hide a div in Menu Collapse

I finally got the collapse menu working for the Bootstrap Angular UI. However I still couldn't figure out how to hide the div for the "hide-mobile" class and show the "show-mobile" class in the mobile view instead. Currently, it shows both. Should I be using @media queries for this or...

Angular UI Bootstrap Timepicker - value assignment issue with 24hr times

The timepicker is not handling 24hr time assignment correctly. For e.g. <timepicker ng-model="$time" hour-step="1" minute-step="1" show-meridian="true"></timepicker> When I do: $scope.$time = "2012-04-23T18:25:43Z", the timepicker is updated to 06:25 AM. It should be 06:25 PM. Even if I set show-meridian="false", it's still showing 06:25....

Dynamic Modal Bootstrap

I have a table like: When user selects Edit, it opens up a bootstrap Modal containing all td of the tr the Modal is launched from. What I've done so far is: Get Row Index on Edit Click: $(document).on('click', '#editNominHref', function(e) { var global_edit_row = $(this).closest('tr').index(); $('#editNomiModal').modal('show'); }); What I...

Should data-target=“#my-modal” put inside a modal div in Twitter Bootstrap?

I know that putting data-target="#my-modal" in the launch button outside the modal div is necessary. But should I also put that code in the dismiss button inside modal div? Or the machine always knows it's to dismiss the modal div where it's exactly in? <button class="btn btn-success" data-toggle="modal" data-target="#my-modal">Launch Modal</button>...

How to reload page after bootstrap modal closed

$("#customerAdded").modal("show").on("", function () { window.setTimeout(function () { $("#customerAdded").modal("hide"); }, 5000); location.reload(); }); Ok, it works. But with location.reload(), despite I change the time, the page is reloaded immediately. I would, after modal closed, that the page was reloaded according the time specified. ...

Bootstrap modal seems disabled on ios device

i bought quick-admin template. I use bootstrap modal, it's okay with PC and android, windows phone but on iOS device all input tags in modal seems disabled and i can't edit inputs. But other templates it works fine. Please can anyone tell what is problem? maybe js or css prevent...

Dynamic multi-column checkboxes with AngularJS and Bootstrap

I need the ability to display a list of checkboxes in multiply columns and have not been able to figure out a why to make it work. I am using AngularJS and Bootstrap. This is what I have working right now but the checkboxes are in one column. <div class="row">...

Show navbar-nav horizontally in mobile screen

The code below shows horizontally in normal desktop view. However, on mobile screen, it shows vertically. <ul class="nav navbar-nav"> <li>Link 1</li> <li>Link 2</li> </ul> Web View: Link 1 Link 2 Mobile View: Link 1 Link 2 I want to show the Mobile view horizontally. Trying to find the right css...

Refresh Angular-ui bootstrap $scope

So I have let's say: $scope.errorMessage = "error1"; $scope.addCardModal = ${ animation: true, templateUrl: 'pages/templates/modals/modal.html', size: "lg", scope: $scope }); $scope.checkError = function() { $scope.errorMessage = "another error"; } And in my modal.html template I have: <div ng-click="checkError()">Check Error</div> <div ng-show="errorMessage">{{ errorMessage }}</div> <div ng-click="errorMessage = false">Close</div> When I load...

Modal Button Click Event

I have a modal that pops up when you click a button, inside that modal I have a save button. When that save button is pressed I would like to fire some C# code in a with an OnClick function.... Can anyone tell me why this isn't working for me?...

Reload List after Closing Modal

I have a list of brands: <script type="text/ng-template" id="list.brands"> <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl"> <input type="text" ng-model="searchBox"> <thead> <tr> <th><tags:label text="brandid"/></th> <th><tags:label text="name"/></th> <th><tags:label text="isactive"/></th>...

Angular-ui bootstrap datepicker won't openup twice

I am using the angular-ui bootstrap datepicker component. on one view where I have two date fields, the datepicker opens up and after closed it opens up again when clicked fine. On another page, after once opened and closed, the datepicker does not open up anymore. Surely I'm missing something...

Using ng-click to toggle between two functions

I am using the datepicker from bootstrap-UI for angular. I would like to toggle between two functions. now() and clear(). Is this possible inside Angular's ng-click? The toggle has the ng-click="today()" I would like to add clear() to it, thanks. Controller Code: $ = function() { $scope.dt = new...

Why is not binding to $scope?

Example So the below template gets loaded as the content for a modal. I can read the scope I've set, but I can't understand how I've not bound the <pagination> to totalItems. Template.html <div class="modal-header"> <h3 class="modal-title">{{$parent.helpName}}</h3> </div> <div class="modal-body"> Page {{currentPage }} of {{totalItems}} <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm"...

How can I open one accordion-group when I click to close another accordion-group?

Here is my accordion: <accordion class="m3Details"> <accordion-group is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> <accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading> <li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="!y.offsite" ><a href="{{}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,"><img src="{{y.icon}}" width="15px"...

Datepicker in Angular ui modal not opening

I have a datepicker within a form in my modal. The datepicker is not opening no matter what I try. My code is : //In my parent controller - Called on button click $scope.openModal = function(indx){ var modalInstance = ${ animation:true, templateUrl:'myModal.html', controller: 'MyModalController' }); }; //In MyModalController $ =...

How to pass model value on close modal popup?(Angularjs)

I have one bootstrap modal popup in angularjs. My plunker is here : Links My problem is that i want to get selected value on close popup not only on close button .if user want to close from out of area like black background also need to get selected value....

Bootstrap collapse and ui-rooter

I have issue with ui-router and using bootstrap collapse. <div class="panel panel-default" id="accordion" > <div role="tab" id="headingOne"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Click me </a> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> Data </div> </div> This is page localhost/#/root/mypage/. So the 'Click me' is pointed to...

Include HTML code in BootStrap Modal Dialog

I want to make use of Boot Strap Modal(, I have included Bootstrap Modal Scripts and Css in my HTML and the Bootstrap Dialog works fine. Now my question is how can I include my html code in the modal dialog. In the examples( it shows to include the HTML...

angularJS pass object attributes to modal

I want to pass a whole object to modal, so I can view all of its attributes there. Right now I have items that look like this: $scope.items = [{ Title: title, Id: id }] In my html page i am using a 'ng-repeat', something like this: <tr ng-repeat="item in...

TypeError: Cannot read property 'open' of undefined

I am trying to create a POP UP using a Modal in angular js.I am facing and issue.Its says. TypeError: Cannot read property 'open' of undefined. Its throwing at $ statement. The code for config as below : homeModuleApp.config(function ($stateProvider) { $stateProvider.state('login', { url: '/login', //templateUrl: '/app/ng/modules/home/partials/login-partials-view.html', //controller: 'ModalDemoCtrl' onEnter:...

Open modal dialog based condition in select drop down

I'm opening a modal dialog box on click of a button like this: <button type="button" data-toggle="modal" data-target="#openModal">Click</button> <div class="modal fade" id="openModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> //modal body </div> I would like to know whether is there any method with which one can open a modal dialog based on select drop...

How to use Angular UI Bootstrap with Laravel 5

I am using Angular UI Bootstrap with my Laravel Framework 5. I am using Rating directive. I see following error : TypeError: Cannot read property '0' of null at Object.ib.functionCall (angular.js:12405) at n.$get.n.$digest (angular.js:14300) at n.$get.n.$apply (angular.js:14571) at eg.$$debounceViewValueCommit (angular.js:23391) at eg.$setViewValue (angular.js:23363) at HTMLInputElement.l (angular.js:19784) at HTMLInputElement.m.event.dispatch (jquery.js:4670) at...

Close bootstrap modal if the button is not placed inside modal-body

So, I have this modal I'm using for a full screen menu and the close button is working perfectly in this form: <div class="modal fade" id="hidden-links"> <div class="modal-dialog"> <div class="modal-content hidden-links"> <div class="modal-body"> <div data-dismiss="modal" aria-label="Close"> <i class="fa fa-times fa-fw fa-2x"></i> </div> <ul class="links-hidden" role="menu"> <!--Hidden links here--> </ul> </div>...

How do I steal the click event from an element?

Long-story-short: I'm trying to make Bootstrap's modal window visible when the page loads. I copied a bit of HTML from W3Schools. <!-- 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-->...

Make UI Bootstrap accordion heading fully clickable area

I have a UI Bootstrap accordion whose heading I want to be fully clickable, not just the title like the default behavior. <accordion class="fda-accordion panel-group panel-group-square" close-others="oneAtATime"> <accordion-group is-open="fdaClass1Open" ng-show="fdaRecallsClass1Count"> <accordion-heading> <div class="panel-heading-blue"> <i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaClass1Open, 'fa-plus': !fdaClass1Open}" style="margin-right:10px"></i> FDA Class 1 Recalls...