This is a migrated thread and some comments may be shown as answers.

Hanging Indents

7 Answers 24 Views
Report Designer (standalone)
This is a migrated thread and some comments may be shown as answers.
Ken
Top achievements
Rank 1
Veteran
Ken asked on 09 Jan 2021, 06:06 PM

How do you format a text box to have a hanging indent?  In my report I want to see a multiline text box where the first line is at the left margin, but all subsequent lines are indented.

7 Answers, 1 is accepted

Sort by
0
Todor
Telerik team
answered on 13 Jan 2021, 12:39 PM

Hi Ken,

Indeed, with Padding, you may position the entire text in the TextBox item. The latter cannot display part of the text indented.

Consider using HtmlTextBox for the required layout.

Regards,
Todor
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ken
Top achievements
Rank 1
Veteran
answered on 13 Jan 2021, 04:43 PM

Hi Todor,

I will give that a try, do you have an example of how this would look in the expression?

Here is the CSS I think I need:

.hangingindent {
  padding-left: 22px ;
  text-indent: -22px ;
}

So I would just use padding-left: 22px; text-indent: -22px;  <FIELD NAME>

Is the above correct?

 

0
Ken
Top achievements
Rank 1
Veteran
answered on 15 Jan 2021, 10:22 PM
Does someone have an example of how to set the HTML?  All the things I have tried have failed so I think it is how the formatting of the HTML needs to be done.
0
Todor
Telerik team
answered on 18 Jan 2021, 11:50 AM

Hi Ken,

Here is how you may use an Embedded Expression to apply the style:

<p style="padding-left: 22px; text-indent: -22px;">{Fields.value}</p>

I have attached also a sample report demonstrating the approach.

Regards,
Todor
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ken
Top achievements
Rank 1
Veteran
answered on 18 Jan 2021, 07:51 PM

Hi Todor,

Thanks for the format of the block command.  The sample code you sent in report2, and putting it into my report, causes the first characters not to be shown.  I am attaching a snippet of the report.  To help me see where the problem I added a boarder to the html box.  I also tried to move the box over to the right to see if the characters were being drawn outside of the box but I got the same result.  Is there a bug in how the CSS is parsed?

2nd question, what are the allowed CSS units for the padding commands.  I tried to use CH for character and got an error message but that is an allowed unit per https://www.w3schools.com/CSSref/css_units.asp.

 

0
Accepted
Todor
Telerik team
answered on 21 Jan 2021, 02:08 PM

Hi Ken,

Indeed, the initial part of the text is hidden due to the negative indent. However, the equivalent padding should neutralize it. I have logged this as a bug and cast a vote on your behalf - The combination of positive Padding-Left and negative Text-Indent CSS styles hides the initial text in HtmlTextBox. As a token of gratitude, we have updated your Telerik points.

The unit types we support are listed in the UnitType Enumeration. Note that they are the Absolute Lengths from the CSS Units. The reason is that our Reporting tool is designed with printing in mind.

Regards,
Todor
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ken
Top achievements
Rank 1
Veteran
answered on 21 Jan 2021, 09:02 PM
Thank you.  Already set to unplanned work.
Tags
Report Designer (standalone)
Asked by
Ken
Top achievements
Rank 1
Veteran
Answers by
Todor
Telerik team
Ken
Top achievements
Rank 1
Veteran
Share this question
or