Posted under CSS
Permalink
Tags CSS, Gestalt, HTML, inline-block, Primefaces, Tip, Tutorial, UIDesign
I originally used display:inline-block, line-height and vertical-align:middle to do this as detailed here, but the results were inconsistent across browsers.
Using floats is a much better solution for a number of reasons – details are as follows:-
- The controls are floated left inside a div which is itself floated left. As the div is floating, it auto resizes to fit around the content, and so scales to fit unknown control sizes.
- The controls are all set to have fixed top and bottom margins (4px in the example), and the leftmost and rightmost also have similar left and right margins respectively.
- The floated div is set to have the desired border and background etc. – in my case, I use Primefaces/jQuery UI theme style classes to apply theme look and feel.
- The floated div is then placed inside another outer div, which may be of fixed dimensions. This allows the control group to adjust in size, but to be located inside a fixed area on a page.
- If the outer div is of fixed size and non floating, the floating inside it is invisible to the rest of the document, so it is not necessary for example to clear the float.
- If desired, the outer div can be set to overflow:auto to allow scroll bars if the size of the inner floating div exceeds the space allocated for it on the page.
- If the area surrounding the control group is also floating, the outer div can also be set to float with no size specified, so the concept works well in both floating and fixed size situations.
- display:inline-block and vertical-align:middle are not used with this method.
This mechanism has the following characteristics:-
- The control group bordering works nicely and consistently with the Primefaces/jQuery theme styling, as rather than trying to centre the controls in a fixed border, instead we vary the border size and keep the margin between the controls and the border constant.
- The approach makes use of the laws of Gestalt Psychology – the eye notices even small imperfections in the alignment of the controls and their relationship to the border because they are close and obviously grouped/related.
- Conversely the position of the entire bordered control group within its surroundings (the outer div) will typically not be so critical – it will likely be in a larger area of white space between it and adjacent items, and so its position and size within that space matters less than the control / border relationship.
A caveat to all this is that it is still not perfect – the simple example below does not perform quite as well in terms of cross browser alignment as the Primefaces/jQuery UI version, as the Primefaces themes apply their own styling as well which changes the situation. This could of course be improved by adjusting the margins individually for different controls in the group to get the best overall cross browser alignment. One very important goal I am trying to acheive is to avoid browser specific CSS. The Primefaces/jQuery UI CSS does in general have browser specific tweaks which will help it in certain situations.
Overall though this approach performs significantly better than the previous method using vertical-align:middle etc. and has the advantage of being fully floating/dynamically sizing if required. An example of this approach follows :-
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
.ss-outerdiv {
height: 40px;
width: 200px;
background-color: orange;
}
.ss-controlgroup {
float: left;
background-color: green;
border: 1px solid black;
}
.ss-select, .ss-leftbutton, .ss-rightbutton {
margin-top: 4px;
margin-bottom: 4px;
float: left;
}
.ss-select {
width: 120px;
font-family: Arial,Verdana,sans-serif;
font-size: 11px;
margin-left: 4px;
margin-right: 4px;
}
.ss-leftbutton, .ss-rightbutton {
height: 20px;
width: 30px;
}
.ss-leftbutton {margin-right: 2px;}
.ss-rightbutton {margin-right: 4px;}
</style>
</head>
<body>
<div class=”ss-outerdiv”>
<div class=”ss-controlgroup”>
<select class=”ss-select”>
<option value=”Test”>Test Value</option>
</select>
<button class=”ss-leftbutton ss-button”></button>
<button class=”ss-rightbutton ss-button”></button>
</div>
</div>
</body>
</html>
Leave a Reply
You must be logged in to post a comment.