Adding Scroll Bar to Silk UI component Content\Panel

Adding Scroll Bar to Silk UI component Content\Panel

  

Hello,

We are using a Silk UI component Panel in our web block, inside this Panel in the content section we have Cards(with Images), we want to enable scroll bar, since the cards are quite a few in number.

How do we accomplish that, searched on google, and got the following link 

https://success.outsystems.com/Documentation/Development_FAQs/How_to_limit_the_height_of_a_div_with_inner_scrolling

Enclosed the Panel component in a container and then defined the style of the container as mentioned on the link, but it did not work. Most of the solutions are similar where they are asking to implement using CSS but its not working.

How can we implement our requirement ? Am i doing something wrong in the CSS (hopefully not), or the web block in question does not allow scrolling ?

In that case, do we have a silk UI component to display data with the option of scroll ? 

Can someone please help us out

Attaching the screenshot for reference


Hi Shreyance,

It will be a bit difficult for us to help you without looking at your HTML and CSS. Would it be possible for you to link to your application (maybe on your personal environment) so that I can take a look at the rendered HTML and try to achieve what you need? This should definitely be possible to achieve using just CSS.

Aurelio Santos wrote:

Hi Shreyance,

It will be a bit difficult for us to help you without looking at your HTML and CSS. Would it be possible for you to link to your application (maybe on your personal environment) so that I can take a look at the rendered HTML and try to achieve what you need? This should definitely be possible to achieve using just CSS.


Hello Aurelio,


Thank you for the prompt response, I am still a bit new to Outsystems, can you please let me know how do i getthe rendered HTML ? Is it to be taken from the browser ? I tried  since we have a widget based system on our firm, could not get the HTML.

The CSS is mentioned below 

SyntaxEditor Code Snippet

.Containerwrapper{
  height: 50px   
  overflow-y:scroll;
}


Thanks,




Solution

Shreyance Shaw wrote:

Aurelio Santos wrote:

Hi Shreyance,

It will be a bit difficult for us to help you without looking at your HTML and CSS. Would it be possible for you to link to your application (maybe on your personal environment) so that I can take a look at the rendered HTML and try to achieve what you need? This should definitely be possible to achieve using just CSS.


Hello Aurelio,


Thank you for the prompt response, I am still a bit new to Outsystems, can you please let me know how do i getthe rendered HTML ? Is it to be taken from the browser ? I tried  since we have a widget based system on our firm, could not get the HTML.

The CSS is mentioned below 

SyntaxEditor Code Snippet

.Containerwrapper{
  height: 50px   
  overflow-y:scroll;
}


Thanks,



Silly of me, my CSS was not proper, its working now.

Thank you for pointing me in the right direction.




Solution