Search code examples
cssxmldialogsapui5

Dialog CSS Style SAP UI5

I have a simple SAP UI5 application, where the user open an add dialog pop-up, I want to change the style of the dialog, the xml of the dialog is something like this:

<core:FragmentDefinition xmlns="sap.m" xmlns:core ="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml>"
   <Dialog title="Add" class="sapUiPopupWithPadding">
     <Input type="Text"/>
     <buttons class="buttonsStyle">
       <Button text="Save"/>
       <Button text="Cancel"/>
     </buttons>
   </Dialog>
 </core:FragmentDefinition>

The CSS:

.buttonsStyle {
 background-color: #d8d8d8 !important;
}

I always get the same result as the picture no matter how I change the CSS, I want to change the color and size of the dialog title (Add) and the background color and font color of the buttons but I get no result by trying and searching.

Thank you.

enter image description here

Solution

  • For buttons you should favor the type attribute over custom CSS ;)

    See the API reference & samples for ButtonType

    https://sapui5.hana.ondemand.com/#/api/sap.m.Button%23controlProperties https://sapui5.hana.ondemand.com/#/api/sap.m.ButtonType https://sapui5.hana.ondemand.com/#/entity/sap.m.Button/sample/sap.m.sample.Button

    For the Dialog, you can use the customHeader aggregation and use some customizable component in place of the title.

    https://sapui5.hana.ondemand.com/#/api/sap.m.Dialog%23aggregations