AngularJS Material layout issue

Question

I've got a couple of layout issues with an Angular Material app. I'm quite new to AngularJS so hopefully it's just something obvious.

The first and most annoying is that I'm struggling with getting an Angular Material list looking as I'd like it to.

<md-content layout-padding>
  <section>
    <md-list ng-cloak>
      <md-list-item class="md-3-line" ng-repeat="item in items | filter:filtered" go-click="item/{{item.id}}">
        <md-icon class="material-icons">{{ item.acknowledgedBy ? 'assignment' : 'assessment'}}</md-icon>
        <div class="md-list-item-text" layout="column" style="overflow: hidden; text-overflow: ellipsis;">
          <h3>{{item.id}} - blah blah </h3>
          <h4>2016-01-01 15:23:45</h4>
          <h4>{{ item.description }}</h4>
        </div>
        <md-checkbox  class="md-secondary" aria-label="Select {{item.id}}" ng-checked="selected.indexOf(item) > -1" ng-click="toggleSelection(item)"></md-checkbox>
      </md-list-item>
    </md-list>
  </section>
</md-content>

The above worked as I expected until I added the checkbox to the list item. However this seems to prevent the text for the description being truncated with an ellipsis. Some of these descriptions can be large and I only want to show a lines worth, the primary action will show the info in full.

There is a plunker at https://plnkr.co/edit/thktG7C63cZv0FhqCzOD

My other niggle, on the same page is I'd like the both title bars to remain at the top of the page, the main app title and menu at the top and view specific title and menu options underneath. Currently the page specific one scolls up off the view.

Answer 1

Answer to your 2nd question.

Use md-content as the parent element since it will provide a scrollbar if needed.Now inside md-content whatever you place outside the 2nd md-content will not be scrollable and will work as a static header.

Here is a full code for that. I use simple ng-repeat and md-button to set more content and set header. You may use it as you like.

<md-content layout='column' layout-fill style='background-color:white'>
<md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
  <div class="md-toolbar-tools">
    <md-menu>
      <md-button aria-label="Menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
        M
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button go-click="/">
            Home
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button go-click="/items">
            Items (12)
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
    <h2>Mobile App</h2>
    <span flex></span>
    <md-button ng-click="page='report';option='option'">
      Report Problem
    </md-button>
    <md-button ng-click="page='unread';option='unread option'">
      Unread Messages
    </md-button>
  </div>
</md-toolbar>
<div layout='row'>
  <span>
  Current Page -> {{page}} 
    </span>
  <span flex></span>
  <span>
    Options - {{option}}
  </span>
</div>
<md-content flex layout='column' style='background-color:yellow'>
  <md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
  <md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
</md-content>

Here is a Working Example. http://codepen.io/next1/pen/yJyOvP

Answer 2

There are a few issues:

1. When screen is smaller than the line width of item.description things gets pushed out of the screen

This this caused by white-space: nowrap; on the <h4> tag. You can fix the layout by overriding it using white-space: normal;.

md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > ._md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > ._md-no-style .md-list-item-text h4 {
    white-space: normal;
}

(I would actually use a <div> and give this a style instead of using <h4> tags because you get this kind of issues with most CSS frameworks.)

2. But now the text will wrap to the next line

I think it will be much easier to use the limitTo angular filter to do this with JavaScript than CSS. Set the value to something like 100, so it will show 100 characters of the string and hide the rest. Here's the original question: Limit the length of a string with AngularJS.

{{ "My String Is Too Long" | limitTo: 9 }} // outputs "My String"

3. Show both title bars

I think this is not possible unless you hack the Angular Material framework.