ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.[Solved] DateTimePicker display behind Bootstrap Modal Popup in AngularJS<p>Hi <a class="username" rel="mahesh213"> mahesh213</a>,</p> <p>Add the following CSS.</p> <pre class="brush: css">&lt;style type=&#34;text/css&#34;&gt; .angularjs-datetime-picker { z-index: 100000 !important; } &lt;/style&gt;</pre> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;Index&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; .angularjs-datetime-picker { z-index: 100000 !important; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;link href=&#34;../../Content/angularjs-datetime-picker.css&#34; rel=&#34;stylesheet&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;../../Scripts/angularjs-datetime-picker.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;angularjs-datetime-picker&#39;]) app.controller(&#39;MyController&#39;, function ($scope, $http, $window) { $scope.Customers = [{ Name: &#34;John Hammond&#34;, Orders: [{ Freight: &#39;&#39;, ShipCountry: &#39;France&#39; }, { Freight: &#39;&#39;, ShipCountry: &#39;Japan&#39; }, { Freight: &#39;&#39;, ShipCountry: &#39;Russia&#39;}] }]; $scope.Orders = []; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;table cellpadding=&#34;0&#34; cellspacing=&#34;0&#34;&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Orders&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tbody ng-repeat=&#34;m in Customers&#34;&gt; &lt;tr&gt;@*Content*@&lt;/tr&gt; &lt;/tbody&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;td&gt;&lt;input type=&#34;text&#34; ng-model=&#34;Name&#34; /&gt;&lt;/td&gt; &lt;td&gt;&lt;button type=&#34;button&#34; ng-model=&#34;subitems&#34; data-toggle=&#34;modal&#34; data-target=&#34;#popup&#34;&gt;Click&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;/table&gt; &lt;div class=&#34;modal fade&#34; id=&#34;popup&#34; role=&#34;dialog&#34;&gt; &lt;div class=&#34;modal-dialog&#34;&gt; &lt;div class=&#34;modal-content&#34;&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;close&#34; data-dismiss=&#34;modal&#34;&gt; &times;&lt;/button&gt; &lt;h4 class=&#34;modal-title&#34;&gt; Modal Header&lt;/h4&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34;&gt; &lt;div class=&#34;s2vk-container&#34;&gt; &lt;div class=&#34;row&#34;&gt; &lt;div class=&#34;col-md-8&#34;&gt; &lt;div class=&#34;panel panel-default&#34;&gt; &lt;table class=&#34;table table-condensed&#34;&gt; &lt;thead&gt; &lt;tr style=&#34;padding-left: 10px; padding-right: 10px;&#34; class=&#34;active&#34;&gt; &lt;th&gt;Freight&lt;/th&gt; &lt;th&gt;ShipCountry&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&#34;subitem in Orders&#34;&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;td&gt;&lt;input datetime-picker date-format=&#34;yyyy-MM-dd HH:mm:ss&#34; class=&#34;input-sm form-control&#34; ng-model=&#34;Freight&#34; /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type=&#34;text&#34; class=&#34;input-sm form-control&#34; ng-model=&#34;ShipCountry&#34; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-default&#34; data-dismiss=&#34;modal&#34;&gt;Close&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/nJqreg5.jpg" alt="" width="299" height="520" /></p>https://www.aspforums.net:443/Threads/608135/Solved-DateTimePicker-display-behind-Bootstrap-Modal-Popup-in-AngularJS/https://www.aspforums.net:443/Threads/608135/Solved-DateTimePicker-display-behind-Bootstrap-Modal-Popup-in-AngularJS/Tue, 20 Aug 2019 03:31:10 GMT