How to work with skin shadow?

HCL Volt MX Volt MX Forum
1
This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

I have a flex container which has a segment inside.

Each segment row has a flex container.

I want to put a shadow on the flex containers inside the segment rows but somehow the shadow only works when I click Inner Shadow.

Also is there a way to put shadow on all four sides?

See screenshots below.

2

Hi,

Shadow will work only when the skin gets forked and the shadow for the widget can be applied the X and Y offset.

Dist X: Denotes the horizontal shadow distance away from the widget. When a positive Dist X value is entered the shadow is moved to the right-side of a widget. When a negative value is entered the shadow is moved to the left-side of a widget.

Dist Y: Denotes the vertical shadow distance away from the widget. When a positive Dist Y value is entered, shadow is moved to the top-side of a widget. When a negative value is entered the shadow is moved to the bottom-side of a widget.

As of now, we can not apply the shadow for all four sides through Skin. But in the desktop web we have Custom CSS support, using Custom CSS we can apply the shadow for four sides.

Customer CSS syntax.

-webkit-box-shadow: 0 0 10px #fff;

box-shadow: 0 0 10px #fff;

3

Hi,

I tried forking a skin and then adding shadow.

I also tried the custom CSS but it is still not somehow showing on the flex.

Please see screenshot below.**Image removed for security reasons****Image removed for security reasons**

4

Hello,

Can you please confirm your Kony Visualizer version details and whether it's a Visualizer Starter or Enterprise.

5

Hi,

I am using Starter Edition Version 8

6

Hi,

Can you please set the clip bounce property false to the flex container to set the custom CSS.

I have tried below custom CSS to the flex container and it's working as per the given CSS values.

border: solid 1px #555;

background-color: #eed;

box-shadow: 0 0 10px rgba(200, 25, 25, 1);

-moz-box-shadow: 0 0 10px rgba(200, 25, 25, 1);

-webkit-box-shadow: 0 0 10px rgba(200, 25, 25, 1);

-o-box-shadow: 0 0 10px rgba(200, 25, 25, 1);

Please refer the attached screenshot.

7

Hi,

Did my response help you? If yes, make sure you click [Select as Best] under the response to close out the post.

8

clipbounds property helps to get the shadow effect.

Thanks..