• Community
  • Ideas
  • Ability to configure the lookup icon Visible OR Hidden in View OR Edit mode separately on a FORM

Ability to configure the lookup icon Visible OR Hidden in View OR Edit mode separately on a FORM

Related products: Web and Windows GUI Universal GUI

Dear all,

 

We see the necessity to have the lookup icon hidden or visible on a Form depending if you are in the View mode or the Edit mode of a screen.

Currently you can configure to have a lookup icon visible or disabled but the same applies when you are in View mode or Editing. So it is either visible on both modes or hidden.


We would like to have the setting separately to avoid clattering the screen when in View mode and only see it edit mode or vise versa.
 

Example:

View/Read Only mode currently we have all Lookup button visible:

 

Ideal View/Read Only mode we would like to disable the middle lookup:

 

Edit mode currently and ideal we need to have all lookup buttons enabled:

 

Updated idea statusNew→Open

@mperrott We use some custom.css to only show the Lookup controls in Read mode when hovering over a specific field, instead of always. 

Don't know exactly why each of these lines was necessary, but this is the code we use related to Lookups:

@media (hover: hover) {
/* Hide Dropdown and X icon in Form fields on hover*/
    .form-field .has-lookup .autocomplete-popup-indicator, .form-field .has-lookup .MuiAutocomplete-clearIndicator {
        display: none
    }
    /*Exemptions for pop-ups since HTML is build up different and is cause the pop-up box to change size while hovering */
    .popup__content .form-field .has-lookup .autocomplete-popup-indicator, .form-field .has-lookup .MuiAutocomplete-clearIndicator {
        display: block
    }
    .form-field:hover .has-lookup .autocomplete-popup-indicator, .form-field:hover .has-lookup .MuiAutocomplete-clearIndicator {
        display: block;
    }
    /* Hide Dropdown and X icon in Form fields when active*/
    .form-field .has-lookup .Mui-focused.Mui-focused .autocomplete-popup-indicator, .form-field .has-lookup .Mui-focused.Mui-focused .MuiAutocomplete-clearIndicator {
        display: block;
    }

    /* Hide look-up while not hovering in read mode */
    .form-field .lookup-popup-button {
        display: none;
    }
    .form-field:hover .lookup-popup-button {
        display: block;
    }
    .form-field .edit-mode .lookup-popup-button {
        display: block;
    } 
}

Would this serve your needs?

@mperrott We use some custom.css to only show the Lookup controls in Read mode when hovering over a specific field, instead of always. 

Don't know exactly why each of these lines was necessary, but this is the code we use related to Lookups:

@media (hover: hover) {
/* Hide Dropdown and X icon in Form fields on hover*/
    .form-field .has-lookup .autocomplete-popup-indicator, .form-field .has-lookup .MuiAutocomplete-clearIndicator {
        display: none
    }
    /*Exemptions for pop-ups since HTML is build up different and is cause the pop-up box to change size while hovering */
    .popup__content .form-field .has-lookup .autocomplete-popup-indicator, .form-field .has-lookup .MuiAutocomplete-clearIndicator {
        display: block
    }
    .form-field:hover .has-lookup .autocomplete-popup-indicator, .form-field:hover .has-lookup .MuiAutocomplete-clearIndicator {
        display: block;
    }
    /* Hide Dropdown and X icon in Form fields when active*/
    .form-field .has-lookup .Mui-focused.Mui-focused .autocomplete-popup-indicator, .form-field .has-lookup .Mui-focused.Mui-focused .MuiAutocomplete-clearIndicator {
        display: block;
    }

    /* Hide look-up while not hovering in read mode */
    .form-field .lookup-popup-button {
        display: none;
    }
    .form-field:hover .lookup-popup-button {
        display: block;
    }
    .form-field .edit-mode .lookup-popup-button {
        display: block;
    } 
}

Would this serve your needs?

@Arie V , I raised this and afterwards we got the above or similar recommendation from Thinkwise to overcome this issue. 

Not sure this idea is valid anymore as above serves this purpose. @Jeroen van den Belt  maybe this idea can be closed with the custom.css solution that was provided as implemented.

@mperrott, all right, I will then close this idea. I will leave it open for comments, should there be a case in which the provided solution would not suffice.

Open→Closed

@mperrott, all right, I will then close this idea. I will leave it open for comments, should there be a case in which the provided solution would not suffice.

Hi @Jeroen van den Belt,

For now I do not think any other scenario that we are not covered with the above. Keep comments open just in case we find something new.

Thanks

@Jeroen van den Belt maybe Thinkwise can gather all these handy CSS snippets for easier reference. I am pretty sure you guys already have a nice collection.

@Freddy Quite some are mentioned here in and below the blog: 

 

Terms & ConditionsCookie settings