CSS not working after Migrate to SAP ui5 m mode

[sinaei]

Dear All,

I have a problem!

I've had a custom CSS for my application of web and everything was right, but I wanted to migrate to mobile mode, so I click on Migrate to SAPui5 m Mode under Tool, but now non of my custom css working!

Can anyone help me with this?
Regards
Sin

[former_member265529]

Hi Sin,

I think the CSS classes will be the problem in your css file. The CSS class will be different for two modes SAPUI5 and SAPUI5 m

For example,

The CSS class for Button in SAPUI5 is "sapUiBtn" but the class in SAPUI5 m is "sapMBtn".

You need to rework on the CSS classes for the components

Thanks,

Poovarasan

[former_member544090]

Hello All,

I have a dashboard build in Design studio 1.6 which uses a CSS file. It is already in developed in SAP ui5 m mode

We have migrated the dashboard to Lumira Designer 2.1 following the standard steps for migration. Post migrating when I run the dashboard I don't see the CSS applied completely. At major places the CSS formatting is missing.

For eg: We have used few icons using the font awesome library which are not visible post migration to Lumira Designer 2.1

Can please someone help/suggest what could be the possible cause and fix for this.

Regards,

Rafat

[former_member544090]

Hello All,

I have a dashboard build in Design studio 1.6 which uses a CSS file. It is already in developed in SAP ui5 m mode

We have migrated the dashboard to Lumira Designer 2.1 following the standard steps for migration. Post migrating when I run the dashboard I don't see the CSS applied completely. At major places the CSS formatting is missing.

For eg: We have used few icons using the font awesome library which are not visible post migration to Lumira Designer 2.1

Can please someone help/suggest what could be the possible cause and fix for this.

Regards,

Rafat

[michael_simon4]

Hi Sin,

I noticed that during the migration some inline css style is created which overwrites my custom css entries. If that applies to you also, you could try to add "!important" to your style as a workaround.

Before migration to mMode:

After migration to mMode:

Best regards,

Michael

[TammyPowlas]

Could you share screen shots of your issue, so the community can better assist?

[sinaei]

Dear Tammy,

Thanks a lot for your response,

I have seen this blog, but actually my problem is for simple CSS like: Color of button or Font of text...

But after rendering, none of my CSS works...

I have no idea how to solve this problem...

Regards
Sin

[TammyPowlas]

Hi Sin - this is to be expected; there are new components, etc. when you switch. Please review Mustafa's blog here: https://blogs.sap.com/2015/12/01/design-studio-innovation-series-topic-8-introducing-the-new-m-mode-...

In some cases, depending on your use case, you may not need CSS anymore.