Losing css changes on Panel each time the panel contents are destroyed

[Former Member]

Hello Experts,

I have a Panel and all I want is I do not need the header in 2 Panels in my application. For that I have used the below line in onAfterRendering method in controller.

onAfterRendering: function() {

       $('#oPanelDates-hdr').css({"background": "none"});

       $('#oPanelAddRowSave-hdr').css({"background": "none"});

   }

The 1st time the application loads, this looks perfectly fine. But as soon as I destroy the Panel content, I have the header back.

Which hook method do I use as I want this to be permanent despite navigation, or any changes made in the Panel.

I have tried the above piece in onBeforeShow() as well

Thanks & Regards,

Archana

[jmoors · Accepted solution]

Do you need to use JavaScript to update the style? Can't you just override the CSS element.

.sapUiPanelHdrEmph {

     background: none;

}

Regards,

Jason

[Former Member · Accepted solution]

The reason is I have many panels in my application and I do need header for the others.

Thanks & Regards,

Archana

[jmoors · Accepted solution]

You can use the addStyleClass method to set a custom style.

oPanel.addStyleClass("RemovePanel");

.RemovePanel .sapUiPanelHdr {

  background: none;

}

Here's an example:

JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="h...

[Former Member · Accepted solution]

I had tried this but I was trying SAPUIPanelHdrEmph . Got my mistake. Thanks Jason

Regards,

Archana