Bootstrap dropdown hidden issue in table
In this post we’ll see that, how we can solve the bootstrap dropdown issue when we use the dropdown inside the table or any element with overflow:hidden property. so when you add a bootstrap dropdown button inside a table row and apply the overflow hidden on table container it will hide your dropdown in open state.
For example:
This is sample HTML of your issue:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div class="lorem-table-wrapper"> <div class="table-body"> <table class="table table-striped"> <thead> <tr> <th></th> <th class="sortable">Column 1</th> <th class="sortable">Column 2</th> <th class="sortable">Column 3</th> <th>Column 4</th> <th>Dropdown</th> </tr> </thead> <tbody> <tr> <td class="new-column"><i class="icon-star-o new-machine" title="New Machine"></i></td><td>Lorem lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td> <div class="btn-group"> <button class="btn dropdown-toggle btn-view" data-toggle="dropdown"> <span class="visible-desktop toggle-text">Select</span> <i class="icon-sort"></i> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Lorem lipsum service</a></li> <li><a href="#">Lorem lipsum Content</a></li> <li><a href="#">Lorem lipsum</a></li> <li><a href="#">Custom</a></li> <li><a href="#">Open Requests</a></li> </ul> </div> </td> </tr> <tr> <td class="new-column"></td><td>Lorem Lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td> <div class="btn-group"> <button class="btn dropdown-toggle btn-view" data-toggle="dropdown"> <span class="visible-desktop toggle-text">Select</span> <i class="icon-sort"></i> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Lorem lipsum service</a></li> <li><a href="#">Lorem lipsum Content</a></li> <li><a href="#">Lorem lipsum</a></li> <li><a href="#">Custom</a></li> <li><a href="#">Open Requests</a></li> </ul> </div> </td> </tr> </tbody> </table> </div> </div> |
and this your css for table wrapper
|
1 2 3 4 5 6 7 |
.lorem-table-wrapper .table-body { overflow: visible; overflow-x: auto; overflow-y: hidden; -webkit-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } |
This is your output of your HTML and CSS. you can see dropdown is hidden inside table.
To solve this problem we need to two things:
- First capture the event of bootstrap dropdown button when dropdown show and hide
- show.bs.dropdown
- hide.bs.dropdown
- Second inside this event we will check the current target offset(.offset()) and outer height of the current target(.outerHeight());
Here is the full code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var dropdownMenu; $('.table-body').on('show.bs.dropdown', function (e) { dropdownMenu = $(e.target).find('.dropdown-menu'); $('body').append(dropdownMenu.detach()); var eOffset = $(e.target).offset(); dropdownMenu.css({ 'display': 'block', 'top': eOffset.top + $(e.target).outerHeight(), 'left': eOffset.left, 'width':'184px', 'font-size':'14px' }); dropdownMenu.addClass("mobPosDropdown"); }); $('.table-body').on('hide.bs.dropdown', function (e) { $(e.target).append(dropdownMenu.detach()); dropdownMenu.hide(); }); |
Now run your HTML in browser and see your issue is solved
Thanks for reading. Happy Learning!!!
Windows devices touch issues
In this article i will show you how we can solve the touch issue in windows devices. Now a days we have lot’s of devices are available in the market. So when we are creating a responsive site we have to first fix the device requirement specification from client because we must sure it work properly, user friendly in every device mobile,tablet and desktop and every platform like android,iOS and windows .
Every devices have different specification about touch and it behaves differently. In windows we mostly use IE who handle the touch events differently but in webkit it supports a touch interface that is separate from mouse handling and IE groups the touch,mouse and stylus into a single interface(pointer) it also has been submitted in W3C specification pointer events.
In windows devices IE pointer events model have custom gesture to indicate the area of the page by default gesture handling(pan). we can turn off default gesture handling by using this property -ms-touch-action for example.
|
1 |
<div id="scrollbar" style="overflow: hidden; -ms-touch-action: none;"> |
However, IE10 on Windows Phone 8 also supports the pan-x and pan-y value of -ms-touch-action property which specify that the browser should handle horizontal or vertical gestures to solve the touch issues in windows, and custom JavaScript handlers should handle everything else.
Note Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported in IE11 and may be removed in a future release. Instead, use the non-prefixed name touch-action, which is better for standards compliance and future compatibility.
Syntax
|
1 2 3 4 5 6 7 8 9 |
html { -ms-content-zooming: none; /* Disables zooming */ touch-action: cross-slide-y pan-y; /* Disable any special actions on tap/touch */ } div.list > div.scrollbar{ touch-action: pan-x; } |
When a we touches an element, that element’s touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming.
Property values
One of the following values, a combination of the gesture values.
auto- Initial value. Indicates the Windows Store app using JavaScript will determine the permitted touch behaviors for the element.
none- The element permits no default touch behaviors.
pan-x- The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.
pan-y- The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.
pinch-zoom- The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content.
manipulation- The element permits touch-driven panning and pinch-zooming. This is the shorthand equivalent of “pan-x pan-y pinch-zoom”.
double-tap-zoom- The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows Store apps using JavaScript.
cross-slide-x- The element permits cross-sliding along the horizontal axis.
cross-slide-y- The element permits cross-sliding along the vertical axis.
For more information about web development for windows click here
What is Modernizr
Modernizr is a small piece of JavaScript code library for feature detection that detects the browser support next-generation web technologies in your user’s browsers. Modernizr uses feature detection to allow you to easily fit your website on user’s experiences based with the actual capabilities of their browser.
There are several JavaScript libraries are available now a days, which can help you detect features and browsers. Using these libraries we can detect whether the browser has support for that particular feature or not.
Modernizr gives the ability to detect the new features in the browsers that can render or utilize
Let’s take a example with plain javascript to detect canvas feature.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ var canvasElement = ""; canvasElement = document.createElement('canvas'); if(canvasElement = = = undefined){ $("#draw").html("Canvas is not supported, use something else."); }else{ // canvas is supported by the browser. $("#draw").html("Canvas is supported"); $("body").append(canvasElement); } }); </script> |
In this code, we tried to create a canvas element and then added it to body.
we could use the Modernizr.canvas property to test if the browser supported canvas or not:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ var canvasElement = ""; canvasElement = document.createElement('canvas'); if(Modernizr.canvas){ $("#draw").html("Canvas is supported"); $("body").append(canvasElement); }else{ // canvas is supported by the browser. $("#draw").html("Canvas is not supported, use something else."); } }); </script> |
Modernizr creates an object named Modernizr to the document, which contains all of the test results as Boolean properties. We can write a simple script to list all supported and unsupported features:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function(){ for(var key in Modernizr) { if(typeof Modernizr[key] == 'boolean'){ console.log(key + "::" + Modernizr[key] ); if(Modernizr[key]){ $("#supported- features").append("<b>"+key+"</b><br/>"); }else{ $("#unsupported- features").append("<b>"+key+"</b><br/>"); } } } }); |
Polyfilling with YepNope,requireJS
As a Developer, we can load the JS as per the feature is supported by your browsers. We can use Modernizr.load() method to test if a certain feature is supported or not and load the appropriate JavaScript based on the result. Unfortunately Modernizr.load() is not provided in the modernizr.js file by default and was a part of Modernizr Version 2.8.3. But there are many other third party libraries are available to load resources like YepNope,requireJS,HeadJS etc.
Modernizr.load() is actually yepnope.js (http://yepnopejs.com/). yepnope.js was known as a conditional loader for polyfills, but now its deprecated after version 1.5.
Let’s take a example for this:
|
1 2 3 4 5 6 7 |
<script> Modernizr.load({ test: Modernizr.touch, yep : 'js/touch.js', nope: 'js/no-touch.js' }); </script> |
In below code we are checking if touch is available in the browser then it will load touch.js, otherwise it will load the no-touch.js file into the browser.
For the newer versions of Modernizr, we can include yepnope.js to use Modernizr.load().
Developers can also wrote the previous example of code as below with RequireJS:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> if(Modernizr.touch){ require(['js/touch'], function() { //code to execute when touch..js is loaded }); }else{ require(['js/no-touch'], function() { //code to execute when our polyfill is loaded }); } </script> |
AngularJS Starter Templete With Bootstrap
If you have not tried yet to create angularjs website then definitely this article will help you to create angularjs website with bootstrap starter template. So let’s start.
In this example i am using bootstrap “Justified nav” template.
These are the following AngularJs features what we will covered with creating this template
- MVC(Model view Controller) Architecture
- Calling JSON service with factory
- Dependency Injection
- AngularUI Bootstrap
- Routing
- Directives
- Image Gallery with AngularJS
At the end of the article you understand what is MVC Architecture and how it works in AngularJS? | AngularJS MVC
MVC: It’s a design pattern that breaks the application into three parts Model View Controller. Using a pattern is a reusable solution but in regular javascript we organize the code differently. Another way of looking at patterns are as a templates which can be used in quite a few different scenarios.
Model:
Model is belongs to data it can be dynamic data or static which means you can get it from a database like Mongodb and you can also get data from static JSON file.
Let’s create a static JSON to defining a model. Add following lines in a data.json file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "projectTitle" : "Angular", "nav" : [ {"name" : "Home", "url" : "#/", "className" : "active"}, {"name" : "Projects", "url" : "#/projects", "className" : ""}, {"name" : "Services", "url" : "#/services", "className" : ""}, {"name" : "Downloads", "url" : "#/", "className" : "dropdown", "sub" : [ {"name" : "AngularJS", "url" : "#/angularJS"} ] }, {"name" : "Image Gallery", "url" : "#/imagegallery", "className" : ""}, {"name" : "Contact", "url" : "#/contact", "className" : ""} ] } |
View:
View is displaying the data of model. For this we use double curly brackets and it is lot like using JavaScript template library (like mustache.js).
Let’s create a view, following this instruction in index.html:
- First declare the name of the application using ng-app directive.
1<html lang="en" ng-app="angularApp"> - Download and add the angular library in your page version – v1.3.0-rc.5.
1<script src="lib/angular.min.js"></script>
- Defining the controller name using ng-controller directive in your parent element.
1<div class="container" ng-controller="homeCntrl">
Let’s combined the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="container" ng-controller="homeCntrl"> <!-- Static navbar --> <div class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="isCollapsed = !isCollapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">{{menu.projectTitle}}</a> </div> <div collapse="isCollapsed" class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li ng-repeat="nav in navbar" class="{{nav.className}}" > <a is-active-nav href="{{nav.url}}" class="{{ nav.sub && 'dropdown-toggle'}}" data-toggle="{{nav.sub && 'dropdown' || ''}}" >{{nav.name}} <b ng-show="nav.sub" class="caret"></b></a> <ul class="dropdown-menu" ng-show="nav.sub"> <li ng-repeat="subItem in nav.sub"><a href="{{subItem.url}}">{{subItem.name}}</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div><!--/.container-fluid --> </div> <div ng-view></div> <!-- Site footer --> <div class="footer"> <p>© ngBootstrap.com 2015</p> </div> </div> |
In this HTML we have use ng directives to rendering the data in view.
ng-repeat: The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
ng-init: The ngInit directive allows you to evaluate an expression in the current scope.
ng-click: The ngClick directive allows you to specify custom behavior when an element is clicked.
ng-show: The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.
Controller
It controls how data is retrieved and displayed to end-user. which means Controller gives you control over model and view.
|
1 |
var angularApp = angular.module('angularApp', ['ngRoute', 'ui.bootstrap']) |
Creating angular module name which we have defined in ng-app directive in HTML.
We can also defined the dependency as per the module using [] brackets. For our application we need ngRoute for routing to navigate the site. For this you have to download and include
|
1 |
<script src="lib/angular-router.min.js"></script> |
AngularUI Bootstrap “ui.bootstrap” using the angular bootstrap component., you can download the library from this link https://angular-ui.github.io. and add in html page.
|
1 |
<script src="modules/ui-bootstrap-tpls-0.12.0.min.js"></script> |
Creating Factory in Angularjs
AngularJS provides you three ways to create a service : factory,service and provider. A factory is a simple function which allows you to add some logic before creating the object. It returns the created object.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var angularApp = angular.module('angularApp', ['ngRoute', 'ui.bootstrap']).factory('serviceInfo', function ($http){ 'use strict'; return $http.get('data/json/data.json'); }); angularApp.controller('homeCntrl', function ($scope,serviceInfo, $location){ serviceInfo.success(function(data) { $scope.menu= data; $scope.navbar= data.nav; $scope.navbarRight= data.navRight; }) }); |
Scope is the glue between application controller and the view. During the template linking phase the directives set up $watch expressions on the scope. The $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM.
If you find AngularJS MVC Article helpful please share it and comment below.
You can get the full code from here: https://github.com/harmeet090/Angularjs
What’s new in Bootstrap 4 alpha
Bootstrap 4 comes with ton of major changes so it’s impossible to cover them all in detail here, so here are some of our most major changes:
- Moved from Less to Sass:Using Libsass bootstrap now compiles Sass faster then ever, and also joined large community of Sass developers.
- Improved grid system: Bootstrap now have added a new grid standard to better target mobile devices.
- Flexbox support: The future of web is now change a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.
- Customization is easy:In Bootstrap 4 Now It’s easy to customize the some CSS style options instead of creating new style of like box-shadows,text-shadows transitions, gradients, and more to a separate stylesheet like v3, bootstrap moved all these options into Sass variables. If we want default transitions on everything or to disable rounded corners? Simply we just need to update a variable in Sass and recompiled it.
- Drop IE8 support and moved to rem and em units: Bootstrap 4 dropped support for IE8 and we can take advantage of the CSS3 without being held back with CSS hacks or fallbacks. Typography Pixels have been swapped for rems and ems where appropriate to make responsive and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.
- Rewrote all our JavaScript plugins: Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more.
- Tooltips and Popovers: Bootstrap 4 improved auto-placement of tooltips and popovers using library called Tether.
And many other things like Custom form controls, margin and padding classes, new utility classes, and more have also been included.
Know more about Bootstrap 4 head to the v4 alpha docs!
One more thing…
Bootstrap 4 alpha also launching our latest side project, Official Bootstrap Themes.