I have a system where a user can freely define a set of columns. Later, they can select this column set and enter data for these columns. They can enter multiple rows of data. It looks like this:

enter image description here

But when the user adds many columns, at some point they simply destroy the layout and run out of the browser window to the side:

enter image description here

Is there some UI design that will make this look better?

up vote 2 down vote accepted

One way to make this layout look nicer would be to move the scrollbar to be inside of the grid element and move the Remove button out of it. This allows the user to only move the grid, while leaving any text or other elements above or below visible and intact. I apologize for the poor MSPaint mockup, but here's what I mean:

inline scrollbar

You could try to hide the columns that are not shown right away, the basic idea is something like this:

enter image description here

Otherwise, you could try to break the columns to go on the bottom, if you can afford that, on your system. For example, in HTML something like this is illustrated in the example below, whereas column-count is the number you wish to have in each line.

http://jsfiddle.net/6vsgf/

If you're asking whether there's a solution for an infinite amount of columns eventually being too wide for the screen, then there is no answer.

If you're asking how to prevent it from breaking the CSS and going out of the div, you're at the wrong stackexchange.

  • I am asking the first question. I disagree that there is no answer. I am free to change the approach I use to enter data. One way could be that each "row" of data is visually represented as multiple rows of input fields. Or something else completely. That's why I asked here. I am a developer, not a UX designer. – Daniel Hilgarth Oct 8 '15 at 15:32
  • And yet, you accepted what I named second as the correct answer. A way to prevent the CSS from breaking, but without actually stating how to prevent it. – PixelSnader Oct 12 '15 at 10:29

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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