I am using Chosen multi-select inputs on a site I'm currently designing and building.

I am using them on a form of 6 inputs which filters a list of results. The issue is its quite a set layout...

Optimal layout

However if the user chooses a large number of options from the selects (which is kind of the point) they have to expand vertically to accomodate the space to show the selected items. Like this...

The problem layout

This will end up pushing other content down. Its not massively noticeable but it does slightly 'break' the optimal layout. Would anyone consider this an issue? And what alternatives are there?

3 Answers 3


This is a design problem. What you want to do is avoid suggesting that these regions should be uniformly aligned, so when they become nonuniform and unaligned it doesn't look disconcerting.

Increasing the space between the columns and decreasing vertical padding might help achieve this. There may be other things that would help, the right weight of borders and such, but you'd have to try different things. The main thing is to convey the impression that horizontal alignment isn't important, and when the horizontal alignment breaks, it doesn't look wrong. Play around with spacing and borders and I think you'll see some under some configurations the misalignment will look less disconcerting than other configurations.


Your initial layout creates visual pattern, in this way Gestalt principle of proximity works. Filling the fields could break the pattern and the final image of the filters area look not so pretty.

As the usefullnes (functionality) goes first, then aesthetics, the solution could be on a visual design layer. I think different layout could work better, see the image.
enter image description here

This layout provides more clear perception of filtering elements, too.


If it was my task, I'd make sure things can't move when other things are selected.

Mainly because a user may be confused when two seemingly unconnected options have what would appear to be an interaction - when the expansion of a selected element causes another to move.

I'd simple create a fixed layout, probably one option per row on mobiles and two or more in an obvious grid layout on desktops.

Elements moving around can scare users that aren't tech/internet savvy and make them think 'What did I do?'

If you look at almost any form on any website, the only time something changes after an interaction is when it's directly related to that interaction.

  • Although I'm not sure that I agree that moving fields would necessarily scare a user. This is probably the route I will go down. I'm thinking along the lines of a collapsible bar that contains the filter fields.
    – Joe Taylor
    Oct 16, 2013 at 8:54
  • @Taylor You'd be surprised then at how little confidence some of the much older generation has when it comes to using the internet. You should consider it unless they're not part of your target audience.
    – Dom
    Oct 16, 2013 at 11:44

Your Answer

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

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