how to retain style in a cloned widgets servicenow

[sanjeev20]

I have cloned a widget sc category page widget and replaced the OOB widget without making any other changes on sc_category page. However I can see the styles of the cloned widget are missing and it shows the data in different font and colour. Can anyone help us to understand what we are missing here and how to fix it.

[Alka_Chaudhary]

Hello @sanjeev20 ,

After adding the widget to the page, when you hover over the widget you will see a pencil icon click on that then a pop up will appear and make the required changes  save it. Also, you can open it in platform and make required changes like adding colour & css.

click on 3 bar to open in platform

If this response clears up your doubt, kindly flag it as both helpful and correct.

Thanks,

Alka

[sanjeev20]

Hi Alka,

I understand you are suggesting to customize the instance option, however I donot see any changes in the instance options in OOB and the cloned one. Both are same. Also please refer the screen shot for the OOB and cloned widget. I am really not sure where this is being controlled.

[Alka_Chaudhary]

Hello @sanjeev20 ,

It looks like you have modified the CSS of OOB widget in the cloned widget that's why it is appearing in different way.

If Possible please share the scripts(HTML, Client, Server and CSS) of cloned widget so that I can identify why this is happening.

Thanks.

Alka

[lawrencemgann]

Encountering the same issue here -- the page has no custom CSS and the cloned widget CSS is the same as OOB.  Any thoughts?

OOB

.toggle {
  color: $gray-darker;
  i:not(.active):hover {
	  color: $list-group-link-heading-color;
  }
}

.fa {
  border: 4px solid transparent;
}

.fa.active {
  color: $primary;
  outline-style: solid;
}

.item-table {
  table-layout: fixed;
  background-color: $table-bg;
   tr {
     th {
       padding: 2*$table-cell-padding 2*$table-condensed-cell-padding;
     }
     td {
       padding: 2*$table-cell-padding 2*$table-condensed-cell-padding;
       border: none;
     }
   }
  a:focus {
    outline: 0.5rem auto $brand-primary;
    box-shadow: none;
  }
}

.btn-loadmore {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 20px;
}

.tab-card-padding {
  padding: 2px;
}

@media (min-width: 768px) {
  .item-card-column {
    -ms-flex: 0 0 50%;
    -moz-box-flex: 0 0 50%;
    -moz-flex: 0 0 50%;
    -webkit-box-flex: 0 0 50%;;
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }
}

  @media (min-width: 992px) {
  .item-card-column {
    -ms-flex: 0 0 33.33333%;
    -moz-box-flex: 0 0 33.33333%;
    -moz-flex: 0 0 33.33333%;
    -webkit-box-flex: 0 0 33.33333%;;
    -webkit-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    width: 33.33333%;
  }
}

.sc-panel {
  margin-bottom: 0px;
  border-radius: 0;
}

.catalog-item-name {
  text-decoration: underline;
}

Cloned Widget

.toggle {
  color: $gray-darker;
  i:not(.active):hover {
	  color: $list-group-link-heading-color;
  }
}

.fa {
  border: 4px solid transparent;
}

.fa.active {
  color: $primary;
  outline-style: solid;
}

.item-table {
  table-layout: fixed;
  background-color: $table-bg;
   tr {
     th {
       padding: 2*$table-cell-padding 2*$table-condensed-cell-padding;
     }
     td {
       padding: 2*$table-cell-padding 2*$table-condensed-cell-padding;
       border: none;
     }
   }
  a:focus {
    outline: 0.5rem auto $brand-primary;
    box-shadow: none;
  }
}

.btn-loadmore {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 20px;
}

.tab-card-padding {
  padding: 2px;
}

@media (min-width: 768px) {
  .item-card-column {
    -ms-flex: 0 0 50%;
    -moz-box-flex: 0 0 50%;
    -moz-flex: 0 0 50%;
    -webkit-box-flex: 0 0 50%;;
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }
}

  @media (min-width: 992px) {
  .item-card-column {
    -ms-flex: 0 0 33.33333%;
    -moz-box-flex: 0 0 33.33333%;
    -moz-flex: 0 0 33.33333%;
    -webkit-box-flex: 0 0 33.33333%;;
    -webkit-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    width: 33.33333%;
  }
}

.sc-panel {
  margin-bottom: 0px;
  border-radius: 0;
}

.catalog-item-name {
  text-decoration: underline;
}