Home > Enterprise >  Dialog CSS Style SAP UI5
Dialog CSS Style SAP UI5

Time:01-13

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" >
     <Input type="Text"/>
     <buttons >
       <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

CodePudding user response:

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#controlProperties 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#aggregations

  •  Tags:  
  • Related