Materialize: No support for right-aligned icon in collapsible accordions?

[steelcowboy]

I tried to add

<i class="right-align mdi-hardware-keyboard-arrow-down"></i>

Into my collapsible-header div for the accordion, as I want a way to better indicate that it will drop while still being able to have an icon on the left (i.e. I want unique icons on the left and drop-down indicators on the right); however, it still appeared to the left of the header text. I also tried enclosing the icon in a <p class="right-align"> and a <div class="right-align">, both of which didn't work. Probably not an "issue", but would be a really nice feature!

[Dogfalo]

I believe the class is right

On Mon, Mar 16, 2015 at 10:36 AM, steelcowboy [email protected]
wrote:

I tried to add

Into my collapsible-header div for the accordion, as I want a way to
better indicate that it will drop while still being able to have an icon on
the left (i.e. I want unique icons on the left and drop-down indicators on
the right); however, it still appeared to the left of the header text. I
also tried enclosing the icon in a

and a class="right-align">, both of which didn't work. Probably not an "issue",
but would be a really nice feature!

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/934.

Doggy sends his greetings from Mars.

[steelcowboy]

Thanks!

[nosliwsirhc]

I found that using the .right class didn't work, as in, the icon didn't go all the way to the right. What I did was make a class called "collapsible-secondary" and added it to the icon classes.
.collapsible-secondary { position: absolute; right: 0; }
Also, and this is important, to prevent the icon from going all the way to the right of the window, you need to add this to the .collapsible-header class:
position: relative;
Hope this helps!

[krmgopi]

I found that using the .right class didn't work, as in, the icon didn't go all the way to the right. What I did was make a class called "collapsible-secondary" and added it to the icon classes.
.collapsible-secondary { position: absolute; right: 0; }
Also, and this is important, to prevent the icon from going all the way to the right of the window, you need to add this to the .collapsible-header class:
position: relative;
Hope this helps!

Thank you so much it really helped