Skip to Content
0

Scrollable Formatted Text View

Mar 15, 2017 at 04:53 PM

429

avatar image

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

ki7r9.png (78.4 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

avatar image
Former Member May 11, 2017 at 11:53 AM
1

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.


gkhue.png (39.6 kB)
xhick.png (22.1 kB)
crkln.png (15.3 kB)
Share
10 |10000 characters needed characters left characters exceeded
G. Niewold Mar 21, 2017 at 07:38 AM
0

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

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

Share
10 |10000 characters needed characters left characters exceeded
Ozan Cavusoglu Apr 16, 2017 at 02:44 PM
0

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.


arbhx.png (162.2 kB)
Share
10 |10000 characters needed characters left characters exceeded