Question
Standard Chartered Bank (APAC)
MY
Last activity: 12 Jan 2018 4:27 EST
Wrap URL in layout
I have a requirement to display url.
but it is moving out of the layout.
please help me in wrapping the url within the layout.
TIA.
Sai.
Pegasystems Inc.
IN
Hello Sai,
Thanks for posting your query in PSC :)
Are you using URL control for the ReportPath field? If yes, test the behavior by configuring the Dynamic container containing the field as below:
Under General tab:-
Layout Format: Stacked
Container Format: Other >> Nested
Under Presentation tab:-
Layout mode: Inline-block
Advanced options: Self-Clear checked, Custom CSS class > content-items-maxwidth
Refer the below screenshot observed at my end using Pega 7.2.2:
Regards,
Rincy
Regards,
Rincy
Standard Chartered Bank (APAC)
MY
Hi Rincy,
Thanks for your reply.
we are currently using 7.3.1 version. under presentation tab 7.3.1 doesnt have layout mode.
i have tried rest other options. but still doesnt work.
please let me know if there is any other option for 7.3.1.
Thanks a lot.
Sai.
Pegasystems Inc.
IN
Hello Sai,
Could you share the screenshots of different tab for the layout and ReportPath field of the section.
Meanwhile I will test the same usecase in Pega 7.3.1 and keep you posted with my observation.
Regards,
Rincy
Pegasystems Inc.
IN
Hello Sai,
Are you referring the field(Report Path) under Case Information section? If yes, as @Raichit_GCS suggested, with below style the URL gets wrapped as per expected behavior.
<style>
div.field-item.dataValueRead
{
word-break: break-word;
}
</style>
PS: Use developer tool to find the exact div element.
Regards,
Rincy
Pegasystems Inc.
IN
Hello Sai,
I see the reported behavior in Pega 7.3.1. Refer the URL under the ShowURL label in the below screenshot :
If behavior is as stated above, for the field where URL control is used, open its properties. Under the Presentation tab, choose the edit option as Read-only(always) and Type as Text(instead of URL). This will wrap the text. Refer the below screenshot:
Regards,
Rincy
Pegasystems Inc.
US
Can you please check the below link. We have to apply css for the field which is used to display the url.
https://stackoverflow.com/questions/3949762/how-to-wrap-text-using-css
Please let me know if this helps.
Pegasystems Inc.
IN
Hello Sai,
To wrap the text 2 things are required. One is fixed width and overflow property. Please follow any of the option mentioned below:
Select your property and add below CSS to the same:
1. This is useful when text is dynamic: { width:200px; //update it as per your requirement
Overflow: hidden ; }
2. This could be used when text is static{ white-space: pre-wrap;
word-wrap: break-word; // lower IE versions than 6;
word-break:break-all;
white-space:normal; }
If height of the element is less after wrapping and text is getting cut, add
line-height: 1 em; // increase it according to your requirement.
Hope this helps!
Regards:
Gurpreet