Question Re: Scrollable Formatted Text View in Technology Q&A

Scrollable Formatted Text View

OzanCavusoglu — Wed, 15 Mar 2017 16:53:20 GMT

Hello everyone,

I'm implementing comment functionality in Design Studio 1.6 by leveraging Portable Fragment Bookmarks thanks to Jeroen Van der A's and Karol Kalisz's posts.

The problem I'm having is about the Formatted Text View component in which I populate all the comments with. As the comments keep coming on top of each other the vertical length of the whole text exceeds the screen size and thus creates unwanted behaviour.

What I need from the Formatted Text View component is to show a scroll bar after the text length exceed the designated width and height. While searching the web I came across Orhan Goktas's question about the same functionality in UI Web Dynpro ABAP.

In Design Studio 1.6 even though I specify fixed height and width for Formatted Text View or I put it inside a fixed size panel or grid layout container it keeps exceeding the borders.

My question is is there a way to make Formatted Text View to show scroll bar after its content exceeds its borders?

Best regards,

Ozan

Re: Scrollable Formatted Text View

Former Member — Tue, 21 Mar 2017 07:38:11 GMT

For sure you can. Assign a css class like the following:

.verticalScroll {overflow-y: auto !important;}

Re: Scrollable Formatted Text View

OzanCavusoglu — Sun, 16 Apr 2017 14:44:42 GMT

Sorry for my late Reply G.Niewold. Many thanks for your answer. I tried your class but couldn't make it work. In fact I can't even control the wrap property by white space or word break. I don't know why but even though I assign a class to the FormattedTextView component I can't see the class Information while inspecting it.

Re: Scrollable Formatted Text View

former_member370728 — Thu, 11 May 2017 11:53:29 GMT

Hi Ozan ,

for my it worked the following (using BW Netweaver as backend server) ;

BW backend: SE80 transaction , MIMES:

I have a CSS file ,

standard.css , defined as CSS in the BO DS document under application properties ,

in this document :

/* scroll bar modes */
.scroll-x {
/* allow X scroll */
overflow-x: scroll !important;
}
.scroll-y {
/* allow Y scroll */
overflow-y: scroll !important;
}
.scroll-xy {
/* allow X scroll */
overflow-x: scroll !important;
/* allow Y scroll */
overflow-y: scroll !important;
}
.scroll_hidden {
/* do not allow X scroll */
overflow-x: hidden !important;
/* do not allow Y scroll */
overflow-y: hidden !important;
}

.scroll-x-auto {
/* allow X scroll */
overflow-x: auto !important;
}
.scroll-y-auto {
/* allow Y scroll */
overflow-y: auto !important;
}
.scroll-xy-auto {
overflow: auto; !important;
}

by using

scroll-y-auto

I managed to do it :

But you have to run it on the SERVER not locally ! ( if not it won´t be able to find the class in the custom css ) . You are running in the screenshot locally . Perhaps this is the reason... ? I hope it helps.

Regards,

JoseManuel.