CODEWITHSUNDEEP
javascriptcsssapui5
Ryan
Ryan

Reputation: 301

How can I change css for every DOM object in the page in SAPUI5

I have a things inspector and this things inspector has two titles. I wan to be able to change the css on this titles and make their font size a bit smaller( default fontSize is 16px and I want to drop it to 12px). I tried to get these titles class and use this method to change their size:

var element = document
                    .getElementsByClassName("sapUiUx3TVTitleSecond")[1];
            element.style.fontSize = '12px';
var element = document
                    .getElementsByClassName("sapUiUx3TVTitleFirst")[1];
            element.style.fontSize = '12px';

it does work and I can see the change but as soon as the page finishes loading ( page loading takes couple of second because it needs to read a json object) title sizes go back to its default. I dont even know this is a right way to access DOM elements and change their CSS.

Please point me to the right direction of how to change DOM object css in SAPUI5 in general

Upvotes: 1

Views: 3479

Answers (3)

Qualiture
Qualiture

Reputation: 4920

You could create a new CSS file which you include in your index.html.

Just add the needed selectors with the modified attributes in this custom CSS:

.sapUiUx3TVTitleSecond, .sapUiUx3TVTitleFirst {
    font-size : 12px;
}

Edit: if you need to change it programmatically, you could use the addStyleClass("yourStyle") method which is available to every UI element

Upvotes: 3

budamivardi
budamivardi

Reputation: 760

$("document").ready(function()
{
       $(".sapUiUx3TVTitleSecond").css("font-size","12px");   
})

Upvotes: 1

Unknownman
Unknownman

Reputation: 483

Execute the script after dom gets completely loaded. Try like this

$("document").ready(function()
{

  var element = document
                .getElementsByClassName("sapUiUx3TVTitleSecond")[1];
        element.style.fontSize = '12px';
      var element = document
                .getElementsByClassName("sapUiUx3TVTitleFirst")[1];
        element.style.fontSize = '12px';   
})

Upvotes: 1

Related Questions