Angel Todorov Angel Todorov - 1 year ago 101
AngularJS Question

Angular Material $mdBottomSheet - split into thumbnail and text horizontally

I am implementing Angular Material (AM) in Cordova / Phonegap application. I need to use AM Bottom Sheet where its template is adjusted in certain order:
I have one container, split into two parts where:

  • Left part is a thumbnail (square) where fits the Bottom Sheet height and thumbnail width is equal to the thumbnail height

  • Right part is a text container where fits the Bottom Sheet height and its width takes the remaining from the Bottom Sheet width.

The image below illustrates the Bottom Sheet container split:

enter image description here

I hope this could be achieved via Angular Material Layout, but no luck so far.
Any help would be greatly appreciated!

Answer Source

Here you go - CodePen


<div ng-controller="BottomSheetExample" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
  <md-button flex="50" class="md-primary md-raised" ng-click="showListBottomSheet()">Show bottom sheet</md-button>

  <script type="text/ng-template" id="bottom-sheet-template.html">
      <div style="height:150px" layout="row">
        <div style="background:green; width:150px"></div>
        <div style="background:orange" flex></div>


md-bottom-sheet {
  padding-left: 0;
  padding-top: 0;
  padding-right: 0;
  margin-bottom: -10px;
  border: none;
  background-color: transparent;


.controller('BottomSheetExample', function($scope, $mdBottomSheet) {
  $scope.showListBottomSheet = function() {
      templateUrl: 'bottom-sheet-template.html',
      controller: 'BottomSheetCtrl'

.controller('BottomSheetCtrl', function($scope, $mdBottomSheet) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download