Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(list): fix overflow for ng-click and fix firefox click issues #7503

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/list/list.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,9 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
} else {
// Element which holds the default list-item content.
container = angular.element(
'<button class="md-button _md-no-style">'+
'<div class="md-button _md-no-style">'+
' <div class="_md-list-item-inner"></div>'+
'</button>'
'</div>'
);

// Button which shows ripple and executes primary action.
Expand Down
15 changes: 11 additions & 4 deletions src/components/list/list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -132,14 +132,21 @@ md-list-item {
&._md-button-wrap {
position: relative;

> .md-button:first-child {
> div.md-button:first-child {
// Vertically align the item content.
display: flex;
align-items: center;
justify-content: flex-start;

padding: 0;
margin: 0;

font-weight: 400;
background-color: inherit;
@include rtl(text-align, left, right);
border: medium none;

// The button executor should fill the whole list item.
> .md-button:first-child {
position: absolute;
top: 0;
Expand All @@ -151,8 +158,8 @@ md-list-item {
}

._md-list-item-inner {
width: 100%;
height: 100%;
// The list item content should fill the complete width.
flex: 1 1 auto;
padding: 0 16px;
}

Expand Down Expand Up @@ -327,7 +334,7 @@ md-list-item {
flex: 1;
margin: auto;
text-overflow: ellipsis;
overflow: hidden;
overflow: hidden;

&.md-offset {
@include rtl-prop(margin-left, margin-right, $list-item-primary-width);
Expand Down
7 changes: 3 additions & 4 deletions src/components/list/list.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ describe('mdListItem directive', function() {
var listItem = setup('<md-list-item ng-click="sayHello()"><p>Hello World</p><md-icon class="md-secondary" ng-click="goWild()"></md-icon></md-list-item>');
// First child is our button and content holder
var firstChild = listItem.children().eq(0);
expect(firstChild[0].nodeName).toBe('BUTTON');
expect(firstChild[0].nodeName).toBe('DIV');
// It should contain two elements, the button overlay and the actual content
expect(firstChild.children().length).toBe(2);
var secondChild = listItem.children().eq(1);
Expand All @@ -177,7 +177,7 @@ describe('mdListItem directive', function() {
var listItem = setup('<md-list-item ng-click="sayHello()"><p>Hello World</p><md-icon class="md-secondary" ng-click="goWild()"><md-icon class="md-secondary" ng-click="goWild2()"></md-icon></md-list-item>');
// First child is our button and content holder
var firstChild = listItem.children().eq(0);
expect(firstChild[0].nodeName).toBe('BUTTON');
expect(firstChild[0].nodeName).toBe('DIV');
// It should contain two elements, the button overlay and the actual content
expect(firstChild.children().length).toBe(2);
var secondChild = listItem.children().eq(1);
Expand Down Expand Up @@ -253,8 +253,7 @@ describe('mdListItem directive', function() {

// There should only be 1 md-button (the wrapper) and one button (the unwrapped one)
expect(listItem.find('md-button').length).toBe(1);
// There will be two buttons, because of the button.md-no-style.md-button wrapper.
expect(listItem.find('button').length).toBe(2);
expect(listItem.find('button').length).toBe(1);

// Check that we didn't wrap the button in an md-button
expect(listItem[0].querySelector('md-button button.md-secondary')).toBeFalsy();
Expand Down