Text-right in Titanium

Discuss all problems you have with Servoy here. It might help to mention the Servoy version and Operating System version you are using

Text-right in Titanium

Postby john1598360627 » Thu Jun 30, 2022 1:51 am

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
textright_ng.png (2.71 KiB) Viewed 2802 times


NG Editor text-right
textright_ng_editor.png
textright_ng_editor.png (11.92 KiB) Viewed 2802 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
textright_titan_editor.png (7.83 KiB) Viewed 2802 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?
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Text-right in Titanium

Postby huber » Thu Jun 30, 2022 11:13 am

I also would like to have align-right, and align-centre work in NG and NG Titanium.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: Text-right in Titanium

Postby mboegem » Thu Jun 30, 2022 1:53 pm

huber wrote: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
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Text-right in Titanium

Postby huber » Thu Jun 30, 2022 2:41 pm

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.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: Text-right in Titanium

Postby john1598360627 » Thu Jun 30, 2022 7:27 pm

mboegem wrote:
huber wrote: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
text-align.png (54.56 KiB) Viewed 2760 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?
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Text-right in Titanium

Postby mboegem » Thu Jun 30, 2022 8:09 pm

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.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Text-right in Titanium

Postby john1598360627 » Fri Jul 01, 2022 10:36 pm

mboegem wrote: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?
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm


Return to Discuss possible Issues and Bugs

Who is online

Users browsing this forum: No registered users and 4 guests

cron