CODEWITHSUNDEEP
sapui5
Zhengquan Bai
Zhengquan Bai

Reputation: 1073

What's the correct way of modifying a control through its DOM object?

Sometimes we want to add some custom refinement. For example, I would like to add an underline to TextView. So I want to set the bottom border to "1px solid black", as in the following code:

http://jsbin.com/gozidiqote/edit?html,css,js,output What's the practice of achieving such an aim?

Upvotes: 0

Views: 100

Answers (1)

herrlock
herrlock

Reputation: 1454

In my opinion the easiest way is to alter the css-definitions or rather overwrite them with yours.

Which one depends on your case, if you want to add the line to all TextViews you should use its class, if you want to add it only to this you can give an id to it and attach the style with that.

Using CSS with id (easier):

You need to give your TextView an id, then define the style for that id

new sap.ui.core.TextView("someRandomId", {
    text: "hello world"
});

#someRandomId {
    border-bottom: 1px solid black;
}

Using CSS with class:

First you need to find out, which class every TextView has. To find it you need to look into the "live-dom" of your page (eg. with firefox you right-click the text and press q,. the highlighted span is created by the TextView). When you found the class you define a css-style for it.
In the case of the TextView each has the class sapUiTv, so you can use that one:

.sapUiTv {
    border-bottom: 1px solid black;
}

Upvotes: 2

Related Questions