What is the easiest way to show a placeholder when an item selector is empty?

Hi community,

does any one of you know a nice solution for a placeholders in item selectors where users haven´t assigned an item?

I am looking for a solution for the following CM Form. As you can see I use 3 properties where users can assigned "Reviewers". The amount of required reviewers depends on the change it self, so it can happen, that a few of the fields are empty.

In my case I use some additional text on the right side of the properties that give some additional hints. But the text doesn´t look good when there were no people assigned. In this case there is a huge white gap between the additional text and the property label and it´s hard to see that the helptext and the property belong together.

From my POV a simple placeholder for empty item properties would be the easiest solution to improve this UI situation.

I don´t want to use additional html elements that are hidden/shown by Method. I would be more happy to find a global solution that is reusable across multiple Forms without having to add (and control) additional html placeholder elements all time.

I made some first successful test to simply overwrite the element by Method. As you can see in my picture, I was able to assign a custom text as item link (you can identity the property by it´s class)

It´s not possible to click the "-- No user assigned --" link, nothing will happen when user click this fake value. But already this simple placeholder brings some benefit. Also it still requires the use of an additional Method in the Form to make the value appear, so I wonder if we can simplify this task even more.

Does anyone of you knows other simple and fast solution to add these kind of placeholders?

Thanks for any idea!

Angela

  • Ha, what a success! I maybe found a 100% pure CSS solution without using any Method. We can check if the element content is empty and than simply display a default content. What a glorious solution Grinning

    I maybe share it in my blog, but it still needs some testing. Of course if you know an even better solution I would be still happy to know yours!

  • I just stumbled across this question, and here's what works in Firefox and Chrome (at least):

    <style>
    select:invalid { color: gray; }
    </style>
    <form>
    <select required>
        <option value="" disabled selected hidden>Please Choose...</option>
        <option value="0">Open when powered (most valves do this)</option>
        <option value="1">Closed when powered, auto-opens when power is cut</option>
    </select>
    </form>
     Run code snippet
    Expand snippet

    The Disabled option stops the <option> being selected with both mouse and keyboard, whereas just using 'display:none' allows the user to still select via the keyboard arrows. The 'display:none' style just makes the list box look 'nice'.

    Note: Using an empty value attribute on the "placeholder" option allows validation (required attribute) to work around having the "placeholder", so if the option isn't changed, but is required, the browser should prompt the user to choose an option from the list.

    targetehr