I have a dynamic page, with a header aggregation, where I put a title and some toolbar action buttons, however… they do not look aligned:
Either the title is too high, or the action toolbar buttons are too low… If I add align-items: "Start"
to the action toolbar in chrome dev tools, it looks aligned again…
it should look like in the samples from sapui5 (https://sapui5.hana.ondemand.com/#/entity/sap.f.DynamicPage/sample/sap.f.sample.DynamicPageFreeStyle/code):
I just have no idea what I am doing wrong / different… here is my code:
<mvc:View
controllerName="salesdocumentcreation.controller.SideContent"
xmlns="sap.m"
xmlns:f="sap.f"
xmlns:mvc="sap.ui.core.mvc"
xmlns:c="sap.ui.core"
xmlns:layout="sap.ui.layout"
height="100%"
visible="true"
>
<f:DynamicPage
id="SC_DynamicPage1"
headerPinned="false"
headerExpanded="true"
>
<f:title >
<f:DynamicPageTitle id="SC_DynamicPageTitle1">
<f:heading>
<Title
id="SC_PageTitle"
text="{i18n>SC_PageTitle}"
/>
</f:heading>
<f:expandedContent>
<Title
id="sc_ovTBTitleExpanded"
text="{i18n>SC_Docs_OV_Count} ({= ${appSettings>/allTreeItemsCount}})"
level="H2"
/>
</f:expandedContent>
<f:snappedContent>
<Title
id="sc_ovTBTitleSnapped"
text="{i18n>SC_Docs_OV_Count} ({= ${appSettings>/allTreeItemsCount}})"
level="H2"
/>
</f:snappedContent>
<f:actions >
<Button
id="applyTreeSelectionButton"
icon="sap-icon://multi-select"
type="Default"
enabled="{= ${appSettings>/selectedTreeItemsCount} > 0 ? true : false }"
text=""
press=".applyTreeSelection"
>
<customData>
<BadgeCustomData
id="selectedItemsBadge"
key="badge"
value="{appSettings>/selectedTreeItemsCount} "
/>
</customData>
</Button>
<Button
id="viewSettingsButton"
icon="sap-icon://filter"
type="Default"
enabled="true"
press=".onOpenTreeViewSettingsDialog"
text=""
/>
<Switch change=".onSwitchChange" id="headerSwitchBtn" state="false" customTextOn="On" customTextOff="Off" />
</f:actions>
<!-- <f:navigationActions>
<Button
icon="sap-icon://full-screen"
type="Transparent" />
<Button
icon="sap-icon://decline"
type="Transparent" />
</f:navigationActions> -->
</f:DynamicPageTitle>
</f:title>
....
</mvc:View>
and if I wanted to align the <f:actions> aggregation manually or I dont know, via layout options or Flexbox… how would I have to do it? wrapping a Flexbox / HBox item around does not work…