I have an add services screen, where I can add a service by giving some basic information and then add combinations of variants of that service.

The problem is the width of the combinations list change on the basis of one of fields from basic information "headings". It is bringing inconsistency to the design.

Moreover is there any better way to show a connection between combinations and service? Right now they look apart. Screenshot


In your card for combinations... First I would kill the card visual and put in a flat table layout where the width of each column is first driven by the max length of that columns longest possible selection. Then by available real estate. This will allow for ease of scanning and make one row the full width of the available space. There should also always be one blank row either at the top (best choice if this can get long) or bottom of the table with a + button at the end to add new row of information.

Adding the card also jars with the rest of your visual approach to the page.


Try to ask one question per thread, please.

For the first question I know quite simple yet satisfactory solution. You limit the combo-box width to fit your layout. Upon opening of the combo box either make the options part wide enough to accommodate the items or if the content of a particular item exceeds the field's dimensions, you crop the content to fit the width and show it was cropped (e.g. three dots at the end of the string, or a small arrow right). On mouse hover you show a balloon with the full content, (hard) wrapping it if necessary, i.e. you set the width of the balloon to e.g. 60 characters and everything more than that ends up in the next line.

I don't know what is your locale and if you suffer from extremely long words (like German Fussbodenschleifmachinenverleih) but in most cases you should be ok.

One suggestion - if you're entering test data, try to use real-life-like data, use e.g. lipsum.com for paragraphs and mockaroo.com for fake names and addresses. Event the test data looks much better.

  • Actually his first question is not related to field width. The field "Headings" is a dropdown. Upon selection from the headings dropdown, number of columns in the combinations section will change which kinda makes the card inconsistent. – Sheraz Feb 28 '18 at 8:34
  • The problem is not with the field, but it is related to the content's width that is changing on the basis of that field. Hence the keyword "Dynamic" and "List" – Ahmad Alauddin Feb 28 '18 at 8:58
  • @Shaz, thank you for the remark, it must have slipped my mind. I've edited my answer. – Mike Feb 28 '18 at 8:59

I'd add to @rcburn answer by adding a bit of hierarchy. I created a sample wireframe for reference:

Sample Wireframe

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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