Skip to Content
0

CSS not working after Migrate to SAP ui5 m mode

Oct 26, 2016 at 12:50 PM

342

avatar image

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

5 Answers

avatar image
Former Member Oct 26, 2016 at 04:06 PM
1

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

Share
10 |10000 characters needed characters left characters exceeded
Tammy Powlas
Oct 26, 2016 at 01:33 PM
0

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-for-rendering-fiori-style-apps-in-design-studio-16/

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

Share
10 |10000 characters needed characters left characters exceeded
s sin Oct 26, 2016 at 02:03 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Tammy Powlas
Oct 26, 2016 at 02:57 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Michael Simon Oct 27, 2016 at 09:31 AM
0

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


Share
10 |10000 characters needed characters left characters exceeded