cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Shivakumarcm1
Frequent Visitor

The line breaks after certain characters Eg: 20 characters and move to the next line also the font size decreases as new lines gets added

Hi All,

Greetings or the day!

Im trying to build an app which collects the text the user types and displays it on the screen.

background: I'm trying to build an App where the the user is able to type the message in the text box and the text is displayed in the label.
So far I'm able to achieve this and but the conditions here is that when the user types the text its displaying in a single line.
i changes the settings to multiple line but the text moves to text line after a long set of characters.
I tried exploring on YouTube and didn't get any idea close to the my requirements.

Problem: I'm trying to move the text to the next line after after 20 characters which I'm not sure how to go about  in this situation.
I tried using the HTML text and used the formula but didn't work.

Looking for some guidance on how to set the rule for each line to break and move to next line after 20 characters and also if possible help me reducing the font size every time i move to the next line. As I'm a beginner have less knowledge on PowerApps.
I've attached the screen that I've developed so far.


Looking forward for guidance.
Thanks in advance. 

1 ACCEPTED SOLUTION

Accepted Solutions
BCBuizer
Super User
Super User

Hi @Shivakumarcm1,

 

The issue with your code is that it will stop running after the first condition is met. Therefore you have to introduce some sort of loop.

 

I did a little bit of experimenting and got this to work by setting it in the OnChange property of a TextInput control:

 

Clear(_temp);
ForAll(
	Sequence(
		RoundUp(
			Len(
				TextInput1.Text
			)/20,
			0
		)
	),
	Collect(
		_temp,
		Replace(
			Replace(
				TextInput1.Text,
				1,
				(Value-1)*20, 
				""
			),
			21,
			1000,
			""
		)
	)
);
UpdateContext(
	{_html: Concat(_temp,Value,"<br>")}
);

 

The output of this is a context variable (_html) which includes the text from the same TextInput and after every 20th character has a "<br>" tag inserted. This variable can then be used to get the html code. In below screenshot you see how this works both in an HTMLText control and a regular label:

 

BCBuizer_1-1663778920514.png

 

 



Did you like my post? Please give it a thumbs up! Did I resolve your issue? Please click Accept as Solution to close the topic and so other members of the community can find solutions more easily.

View solution in original post

7 REPLIES 7
Shivakumarcm1
Frequent Visitor

I was able to figure out how to reduce the font size after certain set of characters.

Shivakumarcm1
Frequent Visitor

I Have a text box where i type a message and a HtmlText to display the output of the Textinput.
I've written html code to break the line after certain length of characters using if condition but its not work.
here is the code that ive been using and didnt find any success.
code: 
"<div align = 'center'><font face = Century725 BT)>" &
If(Len(TextInput1.Text)<16,"<br>",
Len(TextInput1.Text)<33, "<br>",
Len(TextInput1.Text)<51,"<br>",
Len(TextInput1.Text)<77,"<br>",
Len(TextInput1.Text)<99,"<br>","<br>") & TextInput1 &"</div></font>"


Could anyone help me on how to proceed further?

BCBuizer
Super User
Super User

Hi @Shivakumarcm1,

 

The issue with your code is that it will stop running after the first condition is met. Therefore you have to introduce some sort of loop.

 

I did a little bit of experimenting and got this to work by setting it in the OnChange property of a TextInput control:

 

Clear(_temp);
ForAll(
	Sequence(
		RoundUp(
			Len(
				TextInput1.Text
			)/20,
			0
		)
	),
	Collect(
		_temp,
		Replace(
			Replace(
				TextInput1.Text,
				1,
				(Value-1)*20, 
				""
			),
			21,
			1000,
			""
		)
	)
);
UpdateContext(
	{_html: Concat(_temp,Value,"<br>")}
);

 

The output of this is a context variable (_html) which includes the text from the same TextInput and after every 20th character has a "<br>" tag inserted. This variable can then be used to get the html code. In below screenshot you see how this works both in an HTMLText control and a regular label:

 

BCBuizer_1-1663778920514.png

 

 



Did you like my post? Please give it a thumbs up! Did I resolve your issue? Please click Accept as Solution to close the topic and so other members of the community can find solutions more easily.
Shivakumarcm1
Frequent Visitor

Hi @BCBuizer ,

 


Greetings for the day!
Thank you for the solution. it works as expected.
Thank you got your time and solution.

Kind regards,
Shivakumar

Shivakumarcm1
Frequent Visitor

Hi @BCBuizer,

If i had to align the text at the center (Vertically and horizontally) of the HTML text control? 
I tried to use the code:

 

<div style='text-align:center'>,

it gets center horizontally. When i tried aligning it vertically it was not possible.
I tried padding, didn't work.
Any input/ suggestions.

Shivakumarcm1
Frequent Visitor

Go the text aligned to the middle of html box by using the following code:
"<div style='width:350px;height:190px;display:table-cell;text-align:center;vertical-align:middle'><font face = 'Century725 BT'>"& _htmlinput &"</div>"

BCBuizer
Super User
Super User

Hi @Shivakumarcm1,

 

Can you please open a new topic for this new question? Like that it is easier for members of the community to find solutions to their questions.



Did you like my post? Please give it a thumbs up! Did I resolve your issue? Please click Accept as Solution to close the topic and so other members of the community can find solutions more easily.

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Top Solution Authors
Top Kudoed Authors
Users online (3,031)