Scrollable Formatted Text View

[OzanCavusoglu]

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

[former_member370728]

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.

[OzanCavusoglu]

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.

[former_member189205]

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

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