Text-right in Titanium

[john1598360627]

Code: Select all

Servoy Version: 2022.3.1.3743

In NG, I used a styleclass called 'text-right'. This would position elements within a Bootstrap container/row/column to the right side (instead of the leftside, which is the default). 'align-right' most of the time never worked so this is what I went with instead.

NG text-right

textright_ng.png (2.71 KiB) Viewed 5129 times

NG Editor text-right

textright_ng_editor.png (11.92 KiB) Viewed 5129 times

In Titanium, text-right doesn't work anymore. Also align-right but that didn't really work before anyways.

Titanium Editor text-right

textright_titan_editor.png (7.83 KiB) Viewed 5129 times

This seems to correlate with my other problem I was having, where positioning doesn't seem local to containers anymore: https://forum.servoy.com/viewtopic.php?f=8&t=23544

So, there doesn't seem to be a way of aligning items within a Bootstrap container. Is this a bug, or is an alternative alignment method in the works?

[huber]

I also would like to have align-right, and align-centre work in NG and NG Titanium.

[mboegem]

I also would like to have align-right, and align-centre work in NG and NG Titanium.

If this doesn't work, your css is not correct.
Depending on the component, it could be that flex layout is used to display content.
Therefor you need to change the settings of the flex layout as well in order to achieve right/center alignment

[huber]

I thought I remembered reading some time ago that these align-right, … to be some sort of predefined styles. I defined styles with these names, but as said, was under the impression, styles with these names were (somewhere) predefined.

[john1598360627]

I also would like to have align-right, and align-centre work in NG and NG Titanium.

If this doesn't work, your css is not correct.
Depending on the component, it could be that flex layout is used to display content.
Therefor you need to change the settings of the flex layout as well in order to achieve right/center alignment

Like I showcase in my OP, there used to be a pre-defined 'text-right' which was builtin to Servoy. I guess these have been deprecated? Not sure why they still show up then.

text-align.png (54.56 KiB) Viewed 5087 times

But, using CSS I was able to make it on my own.

Code: Select all

.alignment-right{
   
   text-align: right;
}


I assume going forward I should avoid using those pre-defined style classes, and only use CSS I create?

[mboegem]

For me on a brand new solution and an empty stylesheet, I see the align-xxx options appear in the style class type-ahead.
When I assign for example 'align-right' on a bootstrapcomponent-label, nothing happens and when I open my browsers inspector, I do not see the style class 'align-right' being applied.
This is simply because it does not exist.

However, when I add the definition below to my stylesheet, it will work.

Code: Select all

.bts-label {
   border-style: solid;
   border-width: 1px;
   border-color: #ccc;
}

.bts-label.align-left,
.bts-label.align-center,
.bts-label.align-right {
   display: flex;
   align-items: center;
}

.bts-label.align-left {
   justify-content: flex-start;
}

.bts-label.align-center {
   justify-content: center;
}

.bts-label.align-right {
   justify-content: flex-end;
}

To me, the inspector is one of the most valuable tools when styling my solution, as it shows me exactly how to define the css(or .less) file.

[john1598360627]

For me on a brand new solution and an empty stylesheet, I see the align-xxx options appear in the style class type-ahead.
When I assign for example 'align-right' on a bootstrapcomponent-label, nothing happens and when I open my browsers inspector, I do not see the style class 'align-right' being applied.
This is simply because it does not exist.

However, when I add the definition below to my stylesheet, it will work.

Code: Select all

.bts-label {
   border-style: solid;
   border-width: 1px;
   border-color: #ccc;
}

.bts-label.align-left,
.bts-label.align-center,
.bts-label.align-right {
   display: flex;
   align-items: center;
}

.bts-label.align-left {
   justify-content: flex-start;
}

.bts-label.align-center {
   justify-content: center;
}

.bts-label.align-right {
   justify-content: flex-end;
}

To me, the inspector is one of the most valuable tools when styling my solution, as it shows me exactly how to define the css(or .less) file.

Interesting, I had no idea they were intentionally left empty to allow users to define how they should work. So is this the case for all the style classes that appear in that type ahead?

For example, in the case of your CSS right there, in the inspector would I just apply 'align-right' or is it 'bts-label align-right'? Like is the idea I can make a different 'align-right' for different elements?