How to set style/Class for parent DOM Element

[Former Member]

Hi all,

I am using SAPUI5 1.12.1 version

In vertical layout I am adding one label
I want to set class to parent element of label (Not to vertical layout control. But to the div which content label. )
for eg:

var oLabel = new sap.ui.commons.Label({text:"Name:", labelFor: oText});

var oButton = new sap.ui.commons.Button({text:"Submit", tooltip:"Submit value"});

var oLayout = new sap.ui.commons.layout.VerticalLayout("Layout1", {

content: [oLabel, oButton]

});

will generate HTML as follows

<div class="sapUiVlt sapuiVlt" data-sap-ui="Layout1" id="Layout1">

   <div class="sapUiVltCell sapuiVltCell  MyCustomClass">

         <label class="sapUiLbl sapUiLblNowrap" style="text-align:left;" dir="Inherit" for="__field0" data-sap-ui="__label1" id="__label1">Name:</label>

   </div>
   <div class="sapUiVltCell sapuiVltCell">

         <button class="sapUiBtn sapUiBtnNorm sapUiBtnS sapUiBtnStd" tabindex="0" aria-disabled="false"

                 role="button" title="Submit value" data-sap-ui="__button2" id="__button2" type="button">Submit</button>

    </div>

</div>

I want to give style or class to parent Div("sapUiVltCell sapuiVltCell") of label element as "MyCustomClass" or want to add custom style as "background-color:#fefefe ;"

Also this vertical layout is always generated On click particular view. So how to set css to that auto-generated div on run time

[former_member182048 · Accepted solution]

Hi Sanket

TodoMVC now has a SAPUI5 example, this is a very good resource showing how to add custom style to you SAPUI5 application.

http://todomvc.com/labs/architecture-examples/sapui5/

Below is the code for the view

https://github.com/tastejs/todomvc/blob/gh-pages/labs/architecture-examples/sapui5/js/todo/Todo.view...

the code uses various ways to change the style, i think you are after something like

oLabel.addStyleClass('MyCustomClass');

Cheers

John P

[Former Member · Accepted solution]

Thanks John,

But I know how to add style in sapui5 controls by using addStyleClass. I want to set style to div, which is auto generated when I use vertical layout control to add row.
I figure this by setting event on vertical layout onAfterRendering and then get DOM element and then give css to parent as follows

oLayout.onAfterRendering: function(){

var container = this.$();

container.find(".headerText").parent().addClass("MyCustomClass");

}

Where
oLayout is verticle layout control
.headerText is class given to sapui5 Label

[Former Member · Accepted solution]

This helped a lot. I was looking for the exact functionality. Thanks