sap.m.Select ignores sapUiSizeCozy in headerContent of ObjectPageLayout - css

Question

Edit:
Bug report Bug Report on github
Situation:
I am writing an app with the ObjectPageLayout.
In the header content I have a sap.m.Select and a sap.m.MultiComboBox with a reset button each.
I want to have them in the header, since they filter all Diagramms and Tabels of the diffrent tabs.
I set my css class as it is discribed in the Workthrough.
When the style is set to compact mode due to the device type everything is fine.
Problem:
When the css class is cozy the select still has the compact style.
The MultiComboBox and buttons and everything else take the cozy style.
--> it looks really bad
Does anyone have an idea, why the select doesn't have the cozy style aswell?
I even tryed hard setting the css style in the XML, but it doesn't work.
If I change the css class of the MultiComboBox or the buttons it works,
but I dont want to always have everything on compact just because the select cannot go on cozy...
To replicate the problem you can just create a new project (UI5 Version 1.71) in the webide and replace the view with mine:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.uxap"
xmlns:layout="sap.ui.layout"
xmlns:m="sap.m"
xmlns:f="sap.f"
controllerName="TEST.TestingSelects.controller.Home"
height="100%"
>
<ObjectPageLayout
id="ObjectPageLayout"
enableLazyLoading="true"
useIconTabBar="true"
showTitleInHeaderContent="false"
>
<headerTitle>
<ObjectPageHeader
id="headerForTest"
objectTitle="{i18n>home.title}"
>
</ObjectPageHeader>
</headerTitle>
<headerContent>
<m:VBox>
<m:HBox>
<m:Select
id="idStoreSelect"
selectedKey="{homeModel>/storeSelectKey}"
change="onStoreSelectChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:Select>
<m:Button
icon="sap-icon://redo"
press="onResetStoreButtonPress"
tooltip="{i18n>home.store.redo.tooltip}"
type="Transparent"
/>
</m:HBox>
<m:HBox>
<m:MultiComboBox
id="idCatMCB"
selectedKeys=""
selectionChange="onCatMBCChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:MultiComboBox>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</m:HBox>
</m:VBox>
</headerContent>
<sections>
<ObjectPageSection title="2014 Goals Plan">
<subSections>
<ObjectPageSubSection title=" ">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
<ObjectPageSection title="Personal">
<subSections>
<ObjectPageSubSection title="Connect">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
<ObjectPageSubSection id="paymentSubSection" title="Payment information">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
</ObjectPageLayout>
</mvc:View>
Code of select when hard setting css style:
<m:Select
id="idStoreSelect"
class="sapUiSizeCozy"
selectedKey="{homeModel>/storeSelectKey}"
change="onStoreSelectChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:Select>

Answer 1

SAP fixed the UI5 bug with the version 1.95 (commit 4c7fffe).
Here you can see, that the sap.m.Select no longer has its own height set in the ObjectPageHeaderContent but applies the height according to the density class:
UI5 ≥ 1.95
UI5 ≤ 1.94
Screenshots from: https://plnkr.co/edit/gTxIx9BvTChZovBZ?preview

Answer 2

To fix the width of the Select you can add the aggregation layoutData
<m:layoutData>
<m:FlexItemData growFactor="1" />
</m:layoutData>
To fix the height of the Button you need to set the content density (as described in the official Walkthrough (Step 37)).
Basically you provide a method in your Component.js which returns the correct density (and don't forget to import "sap/ui/Device" at the top!)
getContentDensityClass : function () {
if (!this._sContentDensityClass) {
if (!Device.support.touch) {
this._sContentDensityClass = "sapUiSizeCompact";
} else {
this._sContentDensityClass = "sapUiSizeCozy";
}
}
return this._sContentDensityClass;
}
Then in the controller of your root view (defined in manifest.json > sap.ui5 > rootView) you can call this method
onInit: function() {
this.getView().addStyleClass(
this.getOwnerComponent().getContentDensityClass()
);
}
I put together a small sample:
https://plnkr.co/edit/h1JZiyYrWLmuck46