Hanging Indents

[Ken]

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.

[Todor]

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

[Ken]

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?

 

[Ken]

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.

[Todor]

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

[Ken]

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.

 

[Todor]

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

[Ken]

Thank you.  Already set to unplanned work.