Skip to Content

CSS not working after Migrate to SAP ui5 m mode

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

7 Answers

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

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2016 at 01:33 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2016 at 02:03 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2016 at 02:57 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 27, 2016 at 09:31 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 17 at 11:18 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 17 at 11:18 AM

    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

    Add comment
    10|10000 characters needed characters exceeded