question Widget Styles Missing after Clone in Employee Slate and Employee Center forum

Widget Styles Missing after Clone

Jesse_H — Thu, 07 Jul 2022 16:27:24 GMT

I cloned the My Requests V2 widget but I noticed the widget style is now different than the original My Requests Widget.

When I inspect the page to compare the original widget vs the cloned one I notice there are unique styles applied to the original widget like:

.v8cc0df25875023000f220cf888cb0bb5 .panel.b .panel-heading .panel-title {

font-size: 2.4rem;
font-weight: 600;

Re: Widget Styles Missing after Clone

Mohith Devatte — Thu, 07 Jul 2022 16:37:15 GMT

Hello,

When you cloned the widget it will only clone the widget and the widget CSS but there might be CSS at the page level as well

Can you please go to the page where this widget is located and check if there is any css in PAGE SPECIFIC CSS field and also check is there any CSS in instance that is holding this widget

please accept this solution if it works for you

Re: Widget Styles Missing after Clone

Jesse_H — Thu, 07 Jul 2022 16:42:16 GMT

Hello,

Thank you for the prompt reply. There are no page or instance-specific styles.

Page:

Widget Instance:

Re: Widget Styles Missing after Clone

Mohith Devatte — Thu, 07 Jul 2022 16:46:32 GMT

If not may be it might been missed .

Lets do one thing in your page specific CSS for your new page please copy paste the CSS what you have pasted above and try reloading the portal .

It might apply the css

Re: Widget Styles Missing after Clone

Jesse_H — Thu, 07 Jul 2022 17:26:34 GMT

The page wasn't copied. I think there is a CSS Include from the EC Theme that is using a unique class assigned to the OOB widget to style it further vs applying styles more broadly so they can be reused.

I will use dev tools to find unique styles, remove the unique class/id reference and apply these styles directly to the cloned widget.

Thank you for your help.

Re: Widget Styles Missing after Clone

Akash_Yadav — Fri, 24 Nov 2023 10:18:30 GMT

Hi Jesse_H
I am facing the same issue. Can you please tell what have you done to fix the padding issue on the cloned widget.
TIA

Re: Widget Styles Missing after Clone

Jesse_H — Mon, 27 Nov 2023 15:09:07 GMT

Hi @Akash_Yadav,

I copied the OOB CSS from the EC Theme that didn't transfer over when I cloned.

1. Go to your cloned My Requests Widget

2. Paste this at the end of the CSS code:

/** Replicate OOB styles from EC Theme that didn't xfer over **/ .panel.b .panels-container > .list-group-item.row { padding: 1.6rem 0 2.4rem; margin: 0 -16px !important; } .panel.b .panel-heading { background: none; border-bottom: none; } .panel.b .panels-container { text-align: center; padding: 0 2.4rem 2.4rem; } .panel.b .panels-container > .list-group-item.row { padding: 1.6rem 0 2.4rem; margin: 0 -16px !important; } .panel.b .panel-heading .panel-title { font-size: 2.4rem; font-weight: 600; } .panel.b .panels-container.list-group { text-align: left; } .primary-display { font-size: 1.6rem; line-height: 1.1; margin-bottom: 0.4rem; font-weight: 600; } .panel.b .panels-container > .table .list-group-item { display: flex; align-items: center; border: 0.1rem solid #DADDE2; border-bottom: none; padding: 1.6rem 2.4rem; } .panel.b .panels-container > .table .list-group-item:last-of-type { border-bottom: 0.1rem solid #DADDE2; } .panel.b .panels-container > .list-group-item.row .control-view label { margin-right: 0.8rem; } .control-view { display: flex; } .panel.b .panels-container > .list-group-item.row > div.m-b-sm { padding-right: 0; margin-bottom: 0.8rem !important; } .panel.b .panels-container > .list-group-item.row { padding: 1.6rem 0 2.4rem; margin: 0 -16px !important; } .panel .requests-header-container .fit-content { min-width: fit-content; } .panel.b .panels-container > .table { margin-bottom: 0; } .secondary-display { font-size: 1.2rem; color: #181A1F; }

Re: Widget Styles Missing after Clone

Akash_Yadav — Mon, 27 Nov 2023 15:35:10 GMT

Thanks for the prompt reply.
This thing worked.