Twitter Bootstrap Question posted in

Twitter bootstrap – How to add click handler only when the device is in xs view?

I have a table, with a button in the third cell of each row. The button/cell is hidden in xs view, using twitter-bootstrap. Here’s a plunker of the example: http://embed.plnkr.co/Huu9UtVYChMf34uoUsAk

HTML:

<table>
  <tbody>
    <tr repeated-item ng-repeat="item in items"></tr>
  </tbody>
</table>

JS:

angular.module('test', []).directive('repeatedItem', function() {
  var lbl = $("#mylbl");
  return {
    restrict: 'A',
    replace: true,
    controller: function($scope){
      $scope.clickrow = function(){
        lbl.text('THIS SHOULD ONLY SHOW WHEN THE BUTTON IS HIDDEN (VIEW XS)');
      };
       $scope.clickbutton = function(){
        lbl.text('CLICKED BUTTON');
      };
    },
    template: '<tr ng-click="clickrow()"><td class="table-col1">Cell 1</td><td>Cell 2</td><td class="hidden-xs"><button ng-click="clickbutton()">Cell 3</button></td></tr>'
  };
});

You can see that the third cell is hidden when the window shrinks. At this point, the ENTIRE TABLE ROW needs to become clickable.

My question is “How can I make the table row clickable only when the device is in xs view?” My best idea right now is to use two different tables to do the job.

I think I can mostly achieve desired results using ng-touch instead of ng-click for the table row, but that won’t work for non-touch devices when the button is hidden.

Tags:

2

Answers


  1. 0

    You can check the screen resolution before executing the code. Since you are using bootstrap xs would mean all screens bellow 768px (http://getbootstrap.com/css/#grid).

    To check add $window in your directive:

    var windowWidth = $window.outerWidth;

if (windowWidth <= 768) {
   // Execute code
}
    Login or Signup to reply.
  2. 0

    Instead of controller use link, so that you can target the elem. Now when the user clicks the row, the label only appears if the button is hidden (meaning that the user is in mobile view). To do this, we detect if the button is visible.

    Using this method, the grid widths can be set in your CSS files, so your design concerns don’t leak into your JavaScript code. So you never have to update the JS code to set a new width.

    .directive('repeatedItem', function() {
  var lbl = $("#mylbl");
  return {
    restrict: 'A',
    replace: true,
    template: '<tr ng-click="clickrow()"><td class="table-col1">Cell 1</td><td>Cell 2</td><td class="hidden-xs"><button ng-click="clickbutton()">Cell 3</button></td></tr>',
    link: function (scope, elem, attrs) {

      scope.clickrow = function ($event) {
        var isButtonVisible = elem.find('button:visible').length;
        var isRowClickAllowed = isButtonVisible === 0;

        if (isRowClickAllowed) {
            alert('Row click event was triggered!');
        } else {
            console.log('Row click event was triggered, but we did nothing, because the button is visible and accessible.');
        }
      };

      scope.clickbutton = function (){
        alert('Button click was triggered!');
      };
    }
  };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search