How to add text Box on banner image in esc portal

[nameisnani]

Hi Team - 

IN esc portal - how to add white background box with inside text on the banner

Present HTML and CSS scirpt

HTML 

<div ng-if="data.topic.active" class="topic-container"
     ng-class="{'mobile-border': c.data.isMobileApp }">

  <div ng-class="data.isMobileApp ? 'topic-header-mobile':'topic-header'"
       ng-if="data.displayMode === 'text_only' || data.displayMode === 'icon'">
    <div class="topic-header-icon__image-div"
         ng-if="data.displayMode === 'icon'"
         ng-class="c.getIconColorClass()"
         ng-style="c.getIconBackgroundColor()">
      <img ng-src="{{data.topic.icon}}"
           ng-if="data.topic.icon"
           aria-hidden="true" />
    </div>

    <div class="topic-header-icon__text">
      <div ng-bind-html="c.widgetTitleHtml"></div>
      

    <div ng-if="c.showFavorite" ng-class="{'mesp-favorite': data.isMobileApp}" class="topic-header-favorite-container">
      <sp-widget widget="data.favoriteWidget"></sp-widget>
    </div>
  </div>


  <div ng-class="c.getTopicHeaderWithBannerClass()"
       ng-if="data.displayMode === 'banner'">
    <div class="topic-header-banner__image"
         role="img"
         aria-label="{{::(data.topic.banner_alt_text || data.topic.name)}}"
         ng-attr-aria-labelledby="{{::('topic-banner-label-' + data.topic.id)}}"
         ng-attr-title="{{::(data.topic.banner_alt_text || data.topic.name)}}"
         ng-class="c.getBannerColorClass()"
         ng-style="c.getBannerStyle()">
      <div class="topic-header-banner__gradient"
           ng-style="c.getTransparency()"/>
    </div>
    <div class="topic-header-banner__text col-xs-11 col-sm-6 col-md-4">
      <div ng-bind-html="c.widgetTitleHtml"></div>
      <div class="topic-header-description"
           style="white-space:nowrap;
           display:block; overflow: hidden;
           text-overflow: ellipsis;"
           ng-if="::(options.include_description == 'true')">{{::data.topic.desc}}</div>
    </div>
    
    <div ng-class="{'mesp-favorite': data.isMobileApp}" class="topic-header-banner-favorite-container">
      <sp-widget widget="data.favoriteWidget"></sp-widget>
    </div>
  </div>

</div>

CSS

$sp-space--xl: 24px !default;
$sp-space--lg: 16px !default;
$sp-space--md: 12px !default;
$sp-space--xxl: 32px !default;
$sp-space--sm: 8px !default;

$font-size-base: 16px !default;
$headings-font-weight: 600 !default;

$brand-primary:#4f52bd !default;
$brand-primary-darker: #333579 !default;
$brand-primary-lightest: #D1D2EE !default;

$background-primary: #ffffff !default;
$background-secondary: #f6f6f8 !default;
$background-tertiary: #F0F1F5 !default;

$color-darkest: #07080B !default;
$color-lightest: #FFFFFF !default;

$banner-height-mobile: 200px;
$banner-height-desktop: 300px;
.background-primary {
  background-color: $background-primary;
}

.background-secondary {
  background-color: $background-secondary;
}

.background-tertiary {
  background-color: $background-tertiary;
}

.brand-primary {
  background-color: $brand-primary;
}

.brand-primary-darker {
  background-color: $brand-primary-darker;
}

.brand-primary-lightest {
  background-color: $brand-primary-lightest;
}

.topic-header-icon__image-div {
  min-width: 90px;
  height: 90px;
  margin-right: $sp-space--xl;
  display: flex;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  img {
    width: 56px;
    height: 56px;
  }
}

.topic-header-icon__text {
  width: 100%;
  word-break: break-word;
  .topic-header-title {
    margin: 0;
  }
  .topic-header-description {
    padding-top: $sp-space--sm;
    font-size: $font-size-base;
    margin: 0;
  }
}

.topic-header {
  display: flex;
  align-items: center;
  margin: $sp-space--lg;
}

.topic-header-mobile {
  display: flex;
  align-items: center;
  margin: 20px $sp-space--lg;
  .topic-header-icon__image-div {
    margin-right: $sp-space--lg;
  }
  .topic-header-title {
    font-size: 28px !important;
    font-weight: $headings-font-weight;
    margin: 0;
  }
}

.mobile-border {
  border-bottom: 12px solid #F6F7F7;
}
.topic-header-banner__text {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: auto;
    box-sizing: border-box;
    padding: 14px 20px;
    background-color: #ffffff;
    color: #222222;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    word-break: break-word;
    z-index: 10;
 
    .topic-header-title {
        margin: 0;
        color: #222222 !important;
        text-shadow: none !important;
        opacity: 1;
    }
 
    .topic-header-description {
        padding-top: $sp-space--sm;
        font-size: $font-size-base;
        margin: 0;
        color: #222222 !important;
    }
}
 
.topic-header-banner__text {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
 
    width: calc(100% - 40px);
    max-width: none;
    display: block;
    box-sizing: border-box;
 
    padding: 14px 20px;
    background-color: #ffffff;
    color: #222222;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    word-break: break-word;
    z-index: 10;
 
    .topic-header-title {
        margin: 0;
        color: #222222 !important;
        text-shadow: none !important;
        opacity: 1;
    }
}

can any one please help me with requorment please

[Tejas Adhalrao]

hi @nameisnani ,

Looking at your screenshot, it seems the white container is being applied correctly, but its width is taking up the entire banner. Instead of setting left, right, and width: calc(100% - 40px), wrap the title and description in a separate <div> and apply the white background to that wrapper. Also, set it to display: inline-block (or give it a fixed/max width) so the white box only wraps the text instead of spanning the full banner.

Regards,
Tejas

If you found my solution helpful, please mark it as Helpful and Accept Solution.

[nameisnani]

@Tejas Adhalrao can u please provide me updated script