CODEWITHSUNDEEP
csssapui5
Daniel Graversen
Daniel Graversen

Reputation: 29

How to overwrite CSS

I have a form that is automatically created from SAP NW BPM. This creates a SAP UI5 screen. Normally the fields can be edited, but in this case I don't need the user to fill in any data.

I have a form element that looks like the following.

<f:FormElement label="{i18n>DO_OrgTransord.Street}">
 <f:fields>
  <m:Label text="{path:'Street'}" editable="false"/>
 </f:fields>
</f:FormElement>

The problem is that the label and the fields does not align as seen here.

When I look at the corresponding element I see the label element has a style padding-top:1rem;. In IE/Edge if I remove this then it is shown as I would like to show the code.

I have tried with different forms of styling to make it look better, but it is not working. How can I the information on the label.

Upvotes: 1

Views: 2029

Answers (3)

Daniel Graversen
Daniel Graversen

Reputation: 29

I found that I could use the sap.m.Test to view the data correct.

   <f:FormElement label="{i18n>DO_OrgTransord.VendorName}" >
       <f:fields>
            <m:Text text="{path:'VendorName'}"  xmlns:m="sap.m"  />
       </f:fields>
   </f:FormElement>

Upvotes: 0

Daniel Graversen
Daniel Graversen

Reputation: 29

I got the issue fixed by adding

<form:Form editable="false">

It helped solve the issue with the elements being placed wrong. And since I did not need any input data here it seems okay.

Upvotes: 0

Matti.b
Matti.b

Reputation: 360

In this case you should indeed use an Input or text element rather than a label.

By adding !important to a CSS style, it will overwrite the default CSS always. See !important rules at W3

Upvotes: 1

Related Questions