Responsive List Item Display Issue

[peio72]

I would like to design the following responsive list items display:

Desktop display: (width 100%)
Checkbox-Icon-Text Icon-Icon-Icon-Icon-Icon (aligned to right)

Responsive display: (width 100%)
Checkbox-Icon-Text
Icon-Icon-Icon-Icon-Icon (aligned to left under)

I've tested many config but I can't manage to do it well with the list-item component and checkboxes additional div and also md-secondary not allowing to stack under main list content.

Any help would be great.

Thanx.

[devversion]

Can you please explain your issue with more details. I'm currently not sure, what you try to archive.

Probably share some code, which is not working?

[peio72]

The idea is to create a list like in the list demo: Checkbox with Secondary Action.

I need a group of 7 or 8 actions icons as secondray and when reducing screen the group of those 7-8 icon should stack under checkbox + text. (Actually disappear if you reduce width on the demo)

The main text is a very long text (as url string) that shouldn't break.

Thanx.

[devversion]

@peio72 This is a quite uncommon behavior and is not specified by the Material Design Specifications.

We will not officially support this functionality and this is is actually a question for the ngMaterial Forum Group.

I've added a Codepen with some modified CSS which has the functionality, you expected.
Notice: This is not recommended.

• http://codepen.io/DevVersion/pen/ZOQOKa?editors=1100

Also you may have noticed, that the Icons are not like a button anymore... this is intentional, because it's regular not marked as a secondary item, so you may have to wrap the icons inside of a button yourself.

I'm open for discussion, so please let me know :)

[peio72]

Sure, thanx a lot. It looks like what i'm trying to achieve.
From your codeopen, here is the issues remaining:

• checkbox + text shouldn't stack
• groups of icons should stack in group (not some icons under and others on right)

It's a behavior I need for displaying a list of documents with several actions possible on it (7-8: info, rename, move, ..., etc)
What the Material Design would recommend for this kind of functionnality ? Fad Speed Dial ? (already tested with issues on list-items)

Thanx.

[devversion]

@peio72

The modifications are using Flexbox, which means if you group the elements inside of an element, those will be used as a group..

This is an updated Codepen.

• http://codepen.io/DevVersion/pen/EyPydO

[peio72]

Thanx a lot for your update but not working with Google Chrome (icons won't stack but overlap).

[devversion]

It works fine for me.

[peio72]

Same behaviour on IE11, icons overlap text not stacking. Works fine in Firefox.
Sorry. I spend so may times trying to achieve this without success. Thought it would be easier with list-items management of angular material.

[devversion]

@peio72 I'm trying my best to help you with custom CSS.
Normally this question should be asked in the Angular Material Forum, but I'm happy to help you here...

It will be probably easier after #8482.

The Material Design Specifications are not mentioning anything about Multi Line Secondary Items, so you will have to stick to custom CSS.

• https://material.google.com/components/lists.html
• https://material.google.com/components/lists-controls.html#lists-controls-types-of-menu-controls

Actually, everything works fine for me (Chrome 51).

Please continue asking in the Forums and probably show the Codepen, so users won't start from scratch.

[peio72]

Ok I will try to find other solution in the forum.
Yes I didn't find anything for material design about multiple secondary icons.
Sorry but your codeopen not working on my windows 7 Chrome + IE11, it was a good start but at least not working as other solutions I tested.

[devversion]

@peio72 I just checked with IE, and updated the Codepen.

[peio72]

Yes thanx a lot. I will try to update my code based on yours. Really helpful. Thanx.