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

md-list-item: wrong align and word wrapping behavior in IE #3764

Closed
stefan-schweiger opened this issue Jul 16, 2015 · 5 comments
Closed

md-list-item: wrong align and word wrapping behavior in IE #3764

stefan-schweiger opened this issue Jul 16, 2015 · 5 comments
Assignees
@topherfangio
Labels
browser: IE This issue is specific to Internet Explorer needs: review This PR is waiting on review from the team ui: CSS
Milestone
1.0-rc5

Comments

@stefan-schweiger
Copy link

These are acutally two bugs that only occur in IE (I've only tested it in IE11 but I guess it's the same for earlier version):

  1. (non-clickable) md-list-items only containing text align the text at the top
  2. clickable md-list-items with a long text get a weird word wrap

CODEPEN

IE11:
IE
Chrome:
Chrome

<body ng-controller="AppCtrl" ng-app="MyApp" layout="row">
    <md-list class="md-whiteframe-z2">
        <md-list-item style="background: blue;">
            <span>Test 1</span>
        </md-list-item>
        <md-list-item ng-click="console.log('click')"  style="background: green;">
            <span>Test longlong button button button</span>
        </md-list-item>

        <md-list-item style="background: red;">
            <span>Test longlong text text text text</span>
        </md-list-item>
    </md-list>

    <div flex style="background: #CCC"></div>
</body>
@JuHwon
Copy link

JuHwon commented Jul 21, 2015

+1 maybe related to this issue? #3528

@JuHwon
Copy link

JuHwon commented Jul 21, 2015

The reason of strange word wrap with an ng-click is because of the generated button with the class md-no-style which has a flex property set. If you do flex:none on these elements the word wrap is gone. The text align on top still remains though.

@JuHwon
Copy link

JuHwon commented Jul 21, 2015

I found out that the vertical textalignment will work if you specify a height. By default there is only a min-height set (on the md-list-item-inner class), which is breaking the align-items: center in IE. http://jsfiddle.net/e93Lho0q/

@ThomasBurleson ThomasBurleson added the needs: review This PR is waiting on review from the team label Jul 31, 2015
@ThomasBurleson ThomasBurleson self-assigned this Jul 31, 2015
@ThomasBurleson ThomasBurleson modified the milestone: REVISIT Jul 31, 2015
@Londovir Londovir mentioned this issue Aug 6, 2015
Closed
@ThomasBurleson ThomasBurleson added browser: IE This issue is specific to Internet Explorer for: external contributor labels Aug 6, 2015
@ThomasBurleson ThomasBurleson modified the milestones: REVISIT, Backlog Aug 10, 2015
@Bodom78 Bodom78 mentioned this issue Aug 11, 2015
Closed
@ThomasBurleson ThomasBurleson modified the milestones: Backlog, 0.12.0 Sep 2, 2015
@topherfangio topherfangio modified the milestones: 0.12, 0.13 Oct 15, 2015
@ThomasBurleson ThomasBurleson removed this from the 1.0-rc2 milestone Oct 30, 2015
@ThomasBurleson ThomasBurleson modified the milestones: 1.0-rc3, 1.0-rc2 Oct 30, 2015
@topherfangio topherfangio modified the milestones: 1.0-rc5, 1.0-rc3 Nov 3, 2015
@topherfangio
Copy link
Contributor

Both of these issues appear to be fixed in master.

If you are still experiencing issues after upgrading; please comment and I will reopen.

@ashraftm
Copy link

ashraftm commented Dec 4, 2015

Yes, it is still appears in chrome and edge. try same link above or (http://codepen.io/anon/pen/pJZogz?editors=110). Now shrink the browser as closest as possible then you will see gap between lines.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@topherfangio topherfangio

Labels
browser: IE This issue is specific to Internet Explorer needs: review This PR is waiting on review from the team ui: CSS
Projects
None yet
Milestone
1.0-rc5
Development

No branches or pull requests
5 participants
@topherfangio @ashraftm @ThomasBurleson @stefan-schweiger @JuHwon