Prefixing icons to form fields

design material
1

Hey everyone, first off I want to give a huge thanks for developing the material design pages, it has made my workflow much easier. It’s comforting to know that a page designed on a desktop will most likely work on mobile without the need to constantly check.

I am developing a user details form in which a user may insert their address and multiple phone numbers.

Here’s a test implementation for prefixing icons and it works somewhat;

  • this.parent().parent().parent().find('.icon-prefix'); Is there a more robust design that doesn’t depend on the specific grid layout? Looking at Materialize’s implementation they appear to use the general sibling (~) selector.
  • Introduces whitespace between rows. Changing the margins on .form-group-label helps.

If you’d like me to do a pull request let me know.

Cheers, Jacob

1 Like
2

  1. Maybe you can try this.closest('.row').find('.icon-prefix'), where the .row can be anything really. For example, you can create a wrapper div with a customised CSS class and look for .icon-prefix inside it.

  2. Whitespace between rows can be managed by helper classes. For example, you can add .margin-top-no on .form-group-label and that will remove its top margin. There are also .margin-top-lg, .margin-top, .margin-top-sm, .margin-top-xs. Similar helper classes are available for bottom/left/right margins/paddings as well.

1 Like