Is there a generally accepted way of handling controls that are not the same size?

Question

I am standardizing the spacing between controls in an existing winforms application. (4px between rows) The project uses telerik controls that cannot be resized.

The telerik datepicker is 20px high as well as all other standard controls, except for the dropdownlist which is 21px high.

The datepicker and dropdownlist are on the same line and I do not have wiggle room to move the dropdownlist to a new line.

There are multiple instances throughout the application where these two controls are on the same line and there are also instances where controls are directly above the dropdownlist.

I don't know if there is a generally accepted way of dealing with a scenario like this or if I should just pick a method of handling randomly and just run with it for the entire application.

If you do know of a generally accepted method please list your source.

Answer 1

There is no hard and fast rule. If it were me, I'd aim to align both of them on the same baseline (bottom) and let the 1px inconsistency be at the top of the elements. This is how I'd treat it if it were two pieces of type. A little breathing room between rows would certainly help too, but it sounds like you don't have much wiggle room.

Answer 2

Consistency is important, but so is being pragmatic. If the Telerik controls are hard to customize...don't. Use them as is.

We're just talking a pixel here, anyways. I realize details are important, but not at the expense of having easily maintainable code which can help make other feature enhancements easier.

This is especially true if we're talking web UI, where form elements are--at least in part--rendered by the browser/OS and you'll always need a few pixels of wiggle room anyways.

Personally, I find the layout you have quite crowded, but I don't know the full context of your implementation, either.

Bottom line, though, don't lose sleep over this 1 pixel difference.