Dropdown menu hidden under overflow: hidden container

Question

I'm trying to add more options to each row of the ui-grid so I'm implementing "3 dots" approach. However I came across this issue that my dropdown menu goes over the screen because it has position: absolute applied to it. I can't use position: relative because each row and especially the ui-grid has overflow: hidden styling applied which I can't bypass.

I have been using the dropdown-append-to-body="true" directive to do append it to body but this is what makes it go over the screen.

My expected end result is my dropdown menu to stay on the screen. I could just write some styling to display it like 10px on the right of the window but not all of my ui-grids are that wide so it would have been odd that on one of my ui-grids dropdown menu opens far on the right hand side while its width is 50% of the screen.

What can I do to sort this out?

var myApp = angular.module("myApp", ['ui.bootstrap', 'ui.grid']); 

myApp.controller("myController", function () {
    var vm = this;
    
    vm.gridOptions = {
      enableRowSelection: true,
      enableRowHeaderSelection: false,
      enableColumnMenus: false,
      data: [
        { col1: 'Blah', col2: 'Blah' }
      ]
    }
    
    vm.gridOptions.columnDefs = [
      { name: 'col1', displayName: 'Column 1' },
      { name: 'col2', displayName: 'Column 2' },
      { name: 'col3', displayName: 'Column 3' },
      { name: 'col4', displayName: 'Column 4' },
      { name: 'col5', displayName: 'Column 5' },
      { name: 'more', displayName: '', enableSorting: false, minWidth: 55, maxWidth: 70,
        cellTemplate:
          '<div class="ui-grid-cell-contents text-center">' +
            '<span uib-dropdown dropdown-append-to-body="true">' +
              '<i class="ion-ios-more" uib-dropdown-toggle title="More options"></i>' +
              '<ul class="dropdown-menu" uib-dropdown-menu role="menu">' +
                '<li><a>Option 1</a></li>' +
                '<li><a>Option 2</a></li>' +
                '<li><a>Option 3</a></li>' +
              '</ul>' +
            '</span>' +
          '</div>'
      }
    ];
});

body {
  overflow-x: hidden;
}

.ion-ios-more {
  font-size: 24px;
}

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"/>
</head>

<body ng-app="myApp">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js"></script> 

  <div ng-controller="myController as vm">
    <div id="my-grid" ui-grid="vm.gridOptions"></div>
  </div>
</body>

score 0 · Answer 1 · answered Dec 23 '19 at 16:37

Following changes will help you to place your menu on right place
1) make custom class in your JSP.

.custom{
  right: 0 !important;
  left: auto !important;
}

2) add changes to your UL tag.

<ul class="dropdown-menu pull-right custom" uib-dropdown-menu role="menu" >

var myApp = angular.module("myApp", ['ui.bootstrap', 'ui.grid']); 

myApp.controller("myController", function () {
    var vm = this;
    
    vm.gridOptions = {
      enableRowSelection: true,
      enableRowHeaderSelection: false,
      enableColumnMenus: false,
      data: [
        { col1: 'Blah', col2: 'Blah' }
      ]
    }
    
    vm.gridOptions.columnDefs = [
      { name: 'col1', displayName: 'Column 1' },
      { name: 'col2', displayName: 'Column 2' },
      { name: 'col3', displayName: 'Column 3' },
      { name: 'col4', displayName: 'Column 4' },
      { name: 'col5', displayName: 'Column 5' },
      { name: 'more', displayName: '', enableSorting: false, minWidth: 55, maxWidth: 70,
        cellTemplate:
          '<div class="ui-grid-cell-contents text-center">' +
            '<span uib-dropdown dropdown-append-to-body="true">' +
              '<i class="ion-ios-more" uib-dropdown-toggle title="More options"></i>' +
              '<ul class="dropdown-menu pull-right custom" uib-dropdown-menu role="menu" >' +
                '<li><a>Option 1</a></li>' +
                '<li><a>Option 2</a></li>' +
                '<li><a>Option 3</a></li>' +
              '</ul>' +
            '</span>' +
          '</div>'
      }
    ];
});

body {
  overflow-x: hidden;
}
.custom{
  right: 0 !important;
  left: auto !important;
}
.ion-ios-more {
  font-size: 24px;
}

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"/>
</head>

<body ng-app="myApp">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js"></script> 

  <div ng-controller="myController as vm">
    <div id="my-grid" ui-grid="vm.gridOptions"></div>
  </div>
</body>

I have mentioned that some grids won't take 100% width. This means that on some of them the dropdown menu would be out of place as the grid would stop in the middle while the dropdown menu would appear next to the scrollbar. — LazioTibijczyk, Dec 24 '19 at 08:40

Dropdown menu hidden under overflow: hidden container

1 Answers1