sap.m.Select ignores sapUiSizeCozy in headerContent of ObjectPageLayout

user_7556782 0
Viewed 107

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...

enter image description here enter image description here enter image description here

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>
sapui5 css xml
2 Answers
user_75567820

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

user_10839210
Related