Hello @Rahul Sahu ,

Thank you for your reply.

I tried inputting "text-align-right" and something like that in Style Classes as follows, and publish,
but the yellow-highlighted numbers didn't move to the right.

> Also can you share this design image or screenshot? 

Yes, I can send you screenshot.

Thank you.

Hi Itone,

Please study the way CSS works, or otherwise you'll keep asking these questions. CSS alignment doesn't work on Expressions (which are plain text as far as the browser is concerned), but on Containers (which are HTML divs). So embed the Expression in a Container, and use the class on the Container.

@Itone Yoneda ,
There is no shortcut, either you will need to spend more time with your hit and try or to learn by documentation/forum.
So, please don't be in a hurry, learning takes time.
For now, I can suggest you that use simple design components instead of manual adjustments.
Always try to use Outsystem's readymade design/components.
In your current design pattern, you can use columns to divide the area.

After that, it will be easier to manage, and hopefully, our previous suggestion will work with this as well.


Regards,
Anubhav

Hello @Vitor Peixeira ,

Thank you for your help!
My question has been answered.

I enclosed the only expression per lines and set the Layout's Align in Styles of Container widget as follow.  By doing so, was able to move the only value to the right.  

I came up with this approach thanks to your comment.

Thank you so much.

Itone

Hi @Itone Yoneda ,
This is not recommended by Outsystems we should avoid any inline CSS that you are doing.
Instead of this you just need to add the style property that many guys suggested in this post.
You can also mention the class directly in the "style class" input. 

What's the reason you're not simply applying the 'text-align-right' class in the Style Classes field instead of manually adding a style? Applying the css class reduces your code base by reusing existing styles.

Infact, your method is still considered 'inline' by OutSystems.

https://success.outsystems.com/documentation/11/developing_an_application/design_ui/look_and_feel/cascading_style_sheets_css/

"Inline CSS

Define your inline CSS in the Attributes section of the Properties tab. Add the style attribute and then enter the CSS rules with quotes (for example, "background-color: yellow;")."

Hi @Geertjan Jacobs,
This is not recommended because it is hard to manage, If it is for a single place sometimes it can be manageable but if you have started developing the app and doing this practice every were then it will take more effort to manage after some time.

For making this type of CSS change centralized, Outsystems recommends using classes.

Hello @Anubhav Rai ,
Thank you for the information.

Actually, in my Outsystems, there is not Attribute field as follow.
Instead of it, "Extended Properties" is here.

I tried inputting in "Extended Properties", but didn't move to the right.

Do you know why there is not Attribute field?

@Itone Yoneda ,
It looks like you are working on the traditional web app, now you can mention the class differently.

There is a difference for this between Traditional Web and Reactive applications.

Make sure the box in the Styles tab is empty, because this overrules (has priority) over other styling.

https://success.outsystems.com/documentation/11/developing_an_application/design_ui/look_and_feel/cascading_style_sheets_css/#css-specificity

So your screenshot is how not to do it?

Just use the classes that OutSystems already has available for you:

@Anubhav Rai  @Geertjan Jacobs 

Thank you for your many helps.
I tried inputting as follow, but nothing still changed...

I also tried inputting "text-align-right", but an error was occurred.

Am I doing something wrong?

Sorry for many times, but could you please continue to help me?

Itone 

Try to put this in the container. What is happening is that your container is 

Please share the widget tree screenshot of your expression.
and reverify these highlighted places of every container/expression you have for the effective place.


For 1 expression there should be only 1 container with no style properties added, the width should be "Fill" and on the top "Style classes" only 1 class that is "text-align-right" will show.

@Anubhav Rai

Yes, here it is.

What do you think？

Change the width value to Fill

Itone! Have a look at the screenshots! And I think you should do the training and frontend courses to help you tackle this type of problem.

You need the container to be full width and then the expression will go to the right because of the applied class text-align-right on the container! If that doesn't help you remove the width of the expression.

Again, see the differences between your screenshot and the other ones!

Kind Regards,

Márcio

@Anubhav Rai @Márcio Carvalho 

Yes, I tried already changing to Fill.
But the width was too long.

And also, I tried changing to 2col.
Was able to move to the right, but  a little too wide between Label and Expression.

@Márcio Carvalho 
I'm sorry to have bothered you.
Already done basic training courses, just after that, I have to create this app asap.
I don't have enough time to take online course now, and searched this solution in many pages. I wasn't able to find it. That is why I asked my question here.

That's alright, I am just stating that we have sent you screenshots and still you are having problems, you should play a bit with it or at least send us an OML to fix that, it will be more quick and easier to explain... Just chill, try to surpass this problem and think a little bit, that will help you tackle this problem and other problems in the future.

What you need to do now is use a parent container... which will englobe everything, the left and the right and manage the space with that

I am going to send a little example...

The parent container will say how long will be the width of your results... you still need to put it full-width the container which has the expression.

Hello @Márcio Carvalho ,

Thank you for your ps.

I'm just a beginner, so there is many thing I'm not sure from very easy thing.
So your comment is very helpful.

I will do so next time.
Thank you so much.

Itone