locked
Icon in new autocomplete box RRS feed

  • Question

  • To the team,

    This new autocomplete box is fantastic...

    However, why is the icon a 'plus' symbol. That makes the user think that if the autocomplete fails to find a related record, that they can create a new one on the fly.

    What actually happens is that it pops up the original details picker box.

    Would something like an elipses be more appropriate?

    Saturday, September 20, 2014 10:22 AM

Answers

  • I'd wholeheartedly agree and believe even the current icon set contains better suited images.

    Luckily it's a very simple change to make if you use css to customise the image.

    This can be tackled through overriding the standard icon settings by adding the following entries into your user-customization.css file: -

    .msls-ctl-details-modal-picker .id-modal-button.msls-has-search .ui-icon {
        background-position: -1057px 1px;
    }

    The above example produces the following result - replacing the plus with the downward arrow (my personal preference from the in-built icon options): -

    The negative x position offset in the css relates to the position of the image in the msls-blue-icons-36.png and would need to be adjusted to suit the image you prefer from the in-built options.

    Another one which could work is the following choice (the magnifying glass): -

    .msls-ctl-details-modal-picker .id-modal-button.msls-has-search .ui-icon {
        background-position: -566px 0px;
    }

    Alternatively, you could use the following css with your own 20x20px image: -


    Hope this helps,

    Chris





    Saturday, September 20, 2014 10:42 PM

All replies

  • Matt, 

    +1 from me.


    paul van bladel ==independent enterprise application architect== http://blog.pragmaswitch.com

    Saturday, September 20, 2014 1:10 PM
  • I'd wholeheartedly agree and believe even the current icon set contains better suited images.

    Luckily it's a very simple change to make if you use css to customise the image.

    This can be tackled through overriding the standard icon settings by adding the following entries into your user-customization.css file: -

    .msls-ctl-details-modal-picker .id-modal-button.msls-has-search .ui-icon {
        background-position: -1057px 1px;
    }

    The above example produces the following result - replacing the plus with the downward arrow (my personal preference from the in-built icon options): -

    The negative x position offset in the css relates to the position of the image in the msls-blue-icons-36.png and would need to be adjusted to suit the image you prefer from the in-built options.

    Another one which could work is the following choice (the magnifying glass): -

    .msls-ctl-details-modal-picker .id-modal-button.msls-has-search .ui-icon {
        background-position: -566px 0px;
    }

    Alternatively, you could use the following css with your own 20x20px image: -


    Hope this helps,

    Chris





    Saturday, September 20, 2014 10:42 PM
  • Chris,

    Brilliant! Thanks for sharing.

    What interests me (and maybe other readers) a lot is how you find this.

    Cheers


    paul van bladel ==independent enterprise application architect== http://blog.pragmaswitch.com

    Sunday, September 21, 2014 6:29 AM
  • DOM maby 😀. Nice workaround btw.

    Sven Elm

    Sunday, September 21, 2014 6:49 AM
  • Perfect Chris! I would never have guessed that one. I'm adding and straight to my hacks_to_make_lightswitch_work_like_it_should.js file. (which is getting big, by the way).
    Monday, September 22, 2014 4:09 AM