Wanted to share a small trick I used to make Infor CRM / Saleslogix more usable on laptops, especially if you have customized screens that are very tall. On devices with a low resolution height, tall screens can push the resize handle low enough that it can’t be reached, and since there is no “global” scrollbar on the right side that will act for the whole page the users can’t get to the tabs at all! One solution would be to constrain the height of the detail panel… but then users with larger displays who may be able to enjoy viewing the full screen WITH the tabs are no longer able to! So I reached into the “responsive web design” bag of tricks and pulled a tiny media query to constrain the height only in case the screen’s resolution was low enough:
/* Hack to prevent stretching the main content so far
that it hides the resize handle */
@media(max-height: 900px) {
#mainContentDetails
{
max-height: 550px;
}
}
/* even smaller screens */
@media(max-height: 700px) {
#mainContentDetails
{
max-height: 60%;
}
}
Put that in your site’s shared CSS (you can also put it on a style tag on the page) and it will resize the content automatically so as to not push the tabs off screen, giving you a nice scrollbar instead. The 550px seemed like a good number for the 900 resolution point (which is where a lot of laptops are at once you take away the start bar and the browser chrome) and the 60% takes care of the tinier cases (it’s not ideal because at some resolutions you might want to stretch it a little bit taller and the CSS won’t let you! But you could always create more resolution points if needed). You could also use some smart Javascript to calculate the optimal height on the fly but I went with the quick & clean solution.
Note that in practice you’ll probably want to make the rule a little bit more specific so that certain pages are left to stretch out as much as they want. If your “Account” form in particular was very tall for example, you could use something like this to apply the rule only to the account detail page:
/* Hack to prevent stretching the main content so far
that it hides the resize handle */
@media(max-height: 900px) {
form[action^=Account.aspx] #mainContentDetails
{
max-height: 550px;
}
}
/* even smaller screens */
@media(max-height: 700px) {
form[action^=Account.aspx] #mainContentDetails
{
max-height: 60%;
}
}