CSS breaking when SC Catalog Item widget is cloned

[viNikier]

Hi everyone, I just cloned the HRM Catalog Item and SC Catalog Item widgets, and I redirected the custom from hr to sc. But for some reason the CSS broke. I've already looked at the dependencies, pages, containers, lines, etc. Does anyone have any suggestions as to why the css broke?

follow de prints.

Custom SC Catalog Item Widget:

 Custom HRM Catalog Item Widget:

Default SC Catalog Item Widget:

Page with custom Widget

 

Employee Center with Custom Widget

Employee Center with Default Widget

[JustusJ]

Having the same issue after cloning these same two widgets, go figure. Have been unable to resolve, hopefully an expert responds here with what could be going wrong.

[viNikier]

Hey @JustusJ, I opened a case in servicenow for that, if I have any answer, I Reply here!

[viNikier · Accepted solution]

instancename.service-now.com/now/nav/ui/classic/params/target/sp_css.do%3Fsys_id%3D97b1525b1bb8f85047582171604bcbe4

.v3c29786e87133200e0ef0cf888cb0bdf {
        .panel-body { 
          background: $background-primary;
          border: 1px solid $border-tertiary;
          box-sizing: border-box;
          border-radius: 6px;
          h3 { 
            font-size: $font-size-md; 
            font-weight: 500; 
            color: $text-color;
          }
        }
        .m-b-xs {
          color: $text-color;
        }
        .panel-default { 
          padding: $sp-space--xl; 
          box-shadow: $sp-panel-box-shadow; 
          border: none; 
          @media (max-width: 767px){
            padding: $sp-space--lg; 
          }
          >.wrapper-md{
            padding: $sp-space--xl 0 !important;
          }
          .item-header { 
            padding: 0 0 $sp-space--xl !important; 
            h2 { 
              font-size: $font-size-xl; 
              font-weight: 700; 
            } 
            .sc-cat-item-short-description {
              color: $text-secondary;
            }
            & + .wrapper-md.no-margin {
              padding: $sp-space--lg 0!important;
            }
          } 
          .sc-item-description{
            font-family: "Lato", sans-serif!important; 
          }
          .inline-cart {
            >div .alert.alert-info
            {
              margin-top: 0.5em;
              border-color: $border-tertiary;
              background-color: transparent;
              button.label.sc-field-error-label {
                color: $brand-primary;
                background-color: $background-primary;
                border: .1rem solid $brand-primary;
              }
            }
          }
        } 
        div[aria-label="Attachments"],[data-label="Attachments"] {
          background: $background-primary;
          .flex-end {
            justify-content: flex-start;
          }
          .file-attachment {
            .btn-group .btn {
              padding: $sp-space--sm $sp-space--md;
            }
          }
          .sp-attachment-add {
            margin-left: 0;
            font-size: $font-size-base;
          }
        }
        .right-side-cart { 
          position: sticky;
          top: 10%;
          > div { 
            position: inherit;
            width: 100%;
            background: $panel-bg; 
            border-radius: $border-radius-large;
            box-shadow: $sp-panel-box-shadow;
            margin-bottom: $sp-space--xl;
            .panel-default { 
              box-shadow:none;
              margin-bottom:0; 
              .form-group { 
                margin-bottom:$sp-space--sm; 
                .form-group { 
                  margin: $sp-space--lg 0; 
                  b {
                    color: $text-secondary;
                    font-weight: 400;
                  }
                } 
                button[name="add_to_cart"]{ 
                  margin-top: $sp-space--md; 
                } 
              } 
              .cat-item-quantity-group label b {
                font-weight: 400;
                color: $text-secondary;
              }
              .sc-btn {
                color: $btn-default-color;
              }
            } 

            .sc-item-error-messages { 
              position: relative; 
              >.row.alert {
                border-color: $border-tertiary;
                border-radius: $sp-space--xs;
                border-top: 1px solid $border-tertiary;
                margin-top:$sp-space--lg!important; 
                margin-bottom: 0;
                padding:$sp-space--lg;
                >div { 
                  padding:0; 
                  #required_field_bottom {
                    padding: 0 $sp-space--xl;
                  }
                  #required_information_bottom { 
                    margin-bottom: $sp-space--sm; 
                  } 
                  .sc-field-error-label { 
                    background-color: transparent;
                    color: $brand-primary;
                    font-weight: bold;
                    margin-bottom: $sp-space--xs; 
                    border: 1px solid $brand-primary;
                    padding: $sp-space--xxs $sp-space--xs;
                  } 
                } 
              } 
            } 
          } 
        } 
      } 

This is the default CSS from esc portal, just copy that and chage the sys_id:
.v + widget Custom SC Catalog sys id