I'm pretty new to Akido (upgrading existing project) and I've thought I was going mad with trying to reduce the height of each item to something smaller as it's too high. No matter what I could do in the AppStylist editor, it would not reduce in height.
Until I used the IE developer toolbar too look at the exact CSS and discovered that the div had a minheight and height of 30px and nowhere could I find this setting in AppStylist and indeed, it's not there but it is in the CSS:
/* IE 7 fix to icon bad alignment.igeb_Office2010BlueItem ,.igeb_Office2010BlueItemActive ,.igeb_Office2010BlueItemSelected{ min-height: 30px; _height: 30px;} */
/* IE 7 Disabled item fix */.igeb_Office2010BlueItemDisabled a visited, .igeb_Office2010BlueItemDisabled a{ color:Gray;}Could somebody please explain what this hack is all about and if I could remove it assuming that I'm not targeting IE7 or using the "icon" that requires the hack?
Also, this additional styles should really be exposed somewhere in AppStylist as it's very confusing to get additional styles applied that you cannot see/edit.
Cheers, Rob.
Hello Rob,
Most of our Aikido controls support extended CSS styling capabilities. That is why in order to change the height of the “WebExplorerBar” item you should use mainly CSS like this (on the page with explorer bar):
<style type="text/css">
.itemHeight
{
min-height:10px;
height:20px;
}
</style>
<ig:ExplorerBarItem CssClass="itemHeight" Text="TestItem">
</ig:ExplorerBarItem>
The min-height property is mainly used to prevent users from setting too low values for height which can lead to text distortion or disappearing.
The mentioned by you styles for the Office Blue theme where modified in order to provide better cross-browser compatibility. Above CSS class will override them.
Let me know if you need further assistance with this question.
Inform me if you need further assistance with this question.