Background color is not set for sap.m.Button (ui5 1.22.9)

[Former Member]

Hello,

I have implemented the functionality of setting the background color for the sap.m.button on button click event by adding the style class to the button.

Recently we have upgraded the HANA to SP08 latest revision. After that I noticed that SAP UI5 library is in 1.22.9 version. The background color for the button is not set properly now. It is partially visible only on the top and bottom of the button.

I inspected the button element and found that one another inner div element is added to the button.

The code in the button element of the older version as follows

<button type="button" id="B1SB" data-sap-ui="B1SB" tabindex="0" class="sapMBtn sapMBtnDefault sapMBtnDesktop sapMBtnPaddingLeft sapMBtnPaddingRight sapMFocusable" >

     <span class="sapMBtnContent">Hello</span>

</button>

The code in the button element of the newer version as follows

<button type="button" id="B1SB" data-sap-ui="B1SB" class="deselected sapMBtn">

     <div id="B1SB-inner" class="sapMBtnDefault sapMBtnHoverable sapMBtnInner sapMBtnPaddingLeft sapMBtnPaddingRight sapMFocusable">

          <span class="sapMBtnContent" id="B1SB-content">Hello</span>

     </div>

</button>

I am not sure whether this has some relation to the improper rendering.

Kindly help me out to resolve this issue.

Thanks & Regards,

Monissha

[Former Member · Accepted solution]

I am not sure whether this has some relation to the improper rendering.

Possibly not! I remember as if i read "UI5 team doesn't guarantee you the dom structure or class names used internally to be same across all the versions". So it may vary a bit when enhances are done on controls.

I just gave a try to make it compatible with both versions of the dom you had mentioned, check it out running this snippet

http://jsbin.com/zavifo/1/edit

[Former Member · Accepted solution]

Hello Sakthivel,

Thanks for your help.. I am able to fix this problem using your idea parially.

Thanks

Monissha

[Former Member · Accepted solution]

Hi Sakthivel ,

            Which framework is good for javascript?

[former_member91307]

Hi Monissha,

Add important property to CSS value for example

Deselected:{background-color: black !important}

Thanks and Regards,Venkatesh

[Former Member]

Hello Venkatesh,

I have implemented using important only. Even then it does not work properly.

The following is my CSS code

.selected {

  background-color: #007cc0 !important;

  color: #FFFFFF !important;

}

.deselected {

  background-color: #f7f7f7 !important;

  color: #000000 !important;

}

Thanks

Monissha

[former_member182862]

HI Monissha

I suggest that you add a style class and override the sapui5 style class like this.

Thanks

-D

[Former Member]

Hello Dennis Seah,

Thanks for your help.. I am able to fix this problem using your idea parially.

Thanks

Monissha