How do I get the $46,000 to be center aligned against "Total Estimated Quote" ?
I've tried different combinations of Align Center and Center Content but none have worked so far. Here's what the current widget tree looks like:
Thanks!
Hi Daniel,
you can apply the same thing for each container
consider 1 row for 1 container
add one more class for label(for left column) :
.centerLabel {
display: flex; height: 50px; align-items: center;
}
this is the widget tree:
I think you can use margin top for the expression.
How do you mean?
edited the reply with some pic for your reference
But it's a reactive app, what happens when "Total Estimated Quote" only occupies two lines?
Try create this class
.center {
display: flex; height: 80px; align-items: center;
-Set display to flex to make the container/div a flex container
-To more clearly see that the text is vertically centered, define the height property as well(for example 80px). Otherwise the flex container will only be as tall as it needs to be to contain the expression inside.
-Then, set the align-items property to center.
-Lastly, apply the newly created class to both container
Result:
I hope this helps you,
Thanks
Hello @Daniel Johnson,
Use 3 Adaptive\ColumnsSmallLeft instead of one inside you container as shown in the screenshot below. You will need to break the text in the left side into 3 parts and put them individually inside left side of each Adaptive\ColumnsSmallLeft. And put the expression in the 2nd right side. Refer to the screenshot below.
Regards,
Aman Singh Rajput
I think I should have been more specific.
I'm looking to apply these style to this whole card:
And I need everything to align. The data is coming for an server action's output parameter which is a data structure.
That didn't seem to work for me:
can you show me the widget tree of this elements?
All of the containers inside column1 or column2 have the .center style class applied to them.
Doesn't look like the style class is being applied to the right container:
vs
.center is child to whatever .columns-item is, which I would imagine is from the column widget, which doesn't take custom style properties
need to check where did you define the class in block or screen
Not sure how to answer this. We have a separate theme widget that's connected via a dependency. I defined it there and then put "center" in the Style Classes property for each of those containers.
As per you requirement you can use this class to center your content. Enclose your expression in a container and apply this class to it.
.centerdiv{
height: 50%;
display: flex;
justify-content: center;
align-items: center;
Hope this helped
This is the result:
The right column contents are properly vertically aligned, but they need to all be starting from the same margin on the left. The final one seems to still be doing its own thing.
Use this styling .
I suggest you playing with height and padding-left until you get your desired output. I guessing you maybe passing some class to the last element which is giving this result. I suggest deleting that element and remake a new one(this might sound silly but it usually works).
Hello
You need to add some CSS and play with display:flex No need to do any hardcoded value.
I am attaching a sample for you that would work also please check CSS in the stylesheet
https://personal-ejuytnht.outsystemscloud.com/UploadAndDownloadPOC/CardCSS?_ts=638237736378378092Thanks Tousif Kan