I am having a problem with the CSS on my Mobile App.
Application Type
Mobile
Platform Version
11.15.0 (Build 34858)

    Hello, I'm having a problem with my CSS; what I want to do is that the background shown in my IDE appears in the browser, but instead of the Blur image, it's showing a blue layer.

    And when I try to log in, the login screen is split in half.

    When I delete the {.Content} line from the CSS shown in the first image. The login page corrects itself, but the blue layer is still there...

    To be honest, I don't understand much about CSS, so if anyone knows why these problems are happening, I'd like your opinion...

    Kindly, pls...


Solution

So, I am seeing that you have the theme editor with some styles. Those styles are going to override any other style that's why the blue background is still there.


Click on the Reset All Styles button

And of course, you need to remove the styles for the content. That way your login will be flexed all over the screen


When you put flex:0 you need to know what you are doing. Because flex: 0  its the same as flex-grow. The flex gro property "This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor). "


To make the background image, or color the same, you need to find the right classes

Everytime you see that there is a background color different from what you want you need to capture the class that is giving that backgrounmd, because then you just need to change the css. Going to give you an example and you can do to the rest the same:

I copy and paste on the modules theme style sheet and i change the background


And there you go!


EDIT:

I forgot that you can also use the root to change the background

:root{
    --color-background-body:url(/CONNECTION_Mobile/img/CONNECTION_Mobile.SampleBackgroundImageBlur3.png) ;
    --color-background-login:url(/CONNECTION_Mobile/img/CONNECTION_Mobile.SampleBackgroundImageBlur3.png) ;
}

But there will be always some classes that will not use this variables to put the background. And you will need to do the previous step that i have shown to you.

Maybe this guided path can help you to study this little frontend details

https://www.outsystems.com/training/paths/16/becoming-a-front-end-developer-in-outsystems/

Kind Regards,

Márcio

Hello Tatsuya Watanabe,

Maybe you have CSS on the Home screen or you have inline styles that you shouldn't have. It would be great if you could share your OML.

Kind Regards,

Márcio

    Hi @Márcio Carvalho

    Sure, I'll share my OML.


    Thank you so much for helping me @Márcio Carvalho

CONNECTION_Mobile.oml

Solution

So, I am seeing that you have the theme editor with some styles. Those styles are going to override any other style that's why the blue background is still there.


Click on the Reset All Styles button

And of course, you need to remove the styles for the content. That way your login will be flexed all over the screen


When you put flex:0 you need to know what you are doing. Because flex: 0  its the same as flex-grow. The flex gro property "This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor). "


To make the background image, or color the same, you need to find the right classes

Everytime you see that there is a background color different from what you want you need to capture the class that is giving that backgrounmd, because then you just need to change the css. Going to give you an example and you can do to the rest the same:

I copy and paste on the modules theme style sheet and i change the background


And there you go!


EDIT:

I forgot that you can also use the root to change the background

:root{
    --color-background-body:url(/CONNECTION_Mobile/img/CONNECTION_Mobile.SampleBackgroundImageBlur3.png) ;
    --color-background-login:url(/CONNECTION_Mobile/img/CONNECTION_Mobile.SampleBackgroundImageBlur3.png) ;
}

But there will be always some classes that will not use this variables to put the background. And you will need to do the previous step that i have shown to you.

Maybe this guided path can help you to study this little frontend details

https://www.outsystems.com/training/paths/16/becoming-a-front-end-developer-in-outsystems/

Kind Regards,

Márcio

    Hello, I want to thank you very much for the guidance you have given me. Through your advice, I saw where I was doing wrong and was able to discover new ways to use CSS.

    My big problem is that I tried to do the same as another developer did without knowing its role.

    But thanks, I tried to do it the right way, and I can do the course you sent me.

    Thank you again !!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.