1

I have a set of inputs whose type can be changed, and one of the input types is read-only. What's the best way to represent this in a cross-platform manner?

Right now I went with a disabled button which looks like the following:

Ubuntu:

Ubuntu rendering

macOS:

macOS rendering

Windows:

gif displaying the example

I understand a disabled button is a bit misleading as the semantics imply it could be enabled and interacted with. I'm abusing it for it's aesthetics.

For reference I'm using the Qt framework.

2 Answers 2

1

You're asking a very specific question, and for that question, your current way of solving the problem is definitely abusive of the button control (for example I'm not sure it'll look as good in all themes). I'd also consider:

  • set (match on the prompt line) as the value of the text input control and disable input.

  • put a plain text label with match on the prompt line centered on the line.

But, even though this isn't your question, I think you may benefit from looking at the design one level up, thinking about the tasks that need to be accomplished and overall design.

One of the things that jumps at me here is that the layout feels wrong, as in, shouldn't the two columns be swapped? The current order invites users to type in text in the text input control first and then choose the drop-down value. What if users put text in the input control and then change the drop-down value to "prompt"? Their text goes away — was that intentional? Is it still there? Maybe you can still save it so that they don't lose it if that was unintentional, but then in some cases it was intentional and the user didn't want you to save it even as a backup.

So it feels like you should try to orient the flow towards choosing the drop-down value first, and only then to fill out the text control for drop-down values that require one.

It'd also be interesting to understand whether you need the grid. Note for example how things like QueryBuilder do to handle exactly this problem. I'd suggest some research on similar query-building UIs to take inspiration.

1

You can use simple text. If it not possible then apply style which it looks like text. Other things that you need to change a position of control. First, show selection and then show a reaction.

1
  • A simple text would look super bland as a simple text though! Position of the control is laid out by what is most important - and it's the content that is. Oct 31, 2017 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.