Using CSS in SAP UI5

Okay, so it's been a while; as usual! In this post, I explain how to use CSS to affect the screen elements in your UI5 application.

If you're new to UI5, the tutorials here are absolutely invaluable. After much boshing around, I found this one to be the one that I refer back to the most. The "create a ui5 app in 20 seconds" claim is a bit of misdirection in my eyes; true, you are referring to the UI5 library, but you're not talking to a backend, you're not even deploying it anywhere useful (unless you put it in your dropbox folder or some-such). The step between that and the actual application is a little big, and I could have done with a bit more hand-holding, but got there in the end.

I've now developed a few UI5 applications that "do stuff"  in SAP.

So, what did I solve today? I'd used the responsive layout container  but found that a dropdown in the layout kept on overflowing over the end of where I wanted it to be.

In order not to disrupt the flow of the program, I added in the CSS at the top of the HTML, where one would normally put it in... instead of with the JS declaration.

new sap.ui.layout.form.FormElement({
      label: "Status : ",
     fields: [ oDropdownBox2 = new sap.ui.commons.DropdownBox({layoutData: new sap.ui.layout.ResponsiveFlowLayoutData({weight: 1}),
         id: "DropdownBox2",})],

 layoutData: new sap.ui.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

})

The above is the JS declaration of the screen object. I've highlighted the id, because that gets used in the CSS...

<style type="text/css">
#DropdownBox2 {
width: 100%;
max-width: 200px;
min-width: 60px;

}
          </style>

And hey-presto, the dropdown is behaving itself again:

Now I'm sure that there are better ways, but since this works, for now I'll use it until someone corrects me and tells me otherwise! Before anyone asks, I did try changing the weight of the responsiveFlowLayoutData and putting in CSS against the actual declaration, but none of those appeared to have any effect. Try it for yourself!