Hello All,
How to give space between Catalog Item Name and Requested for in Service Portal
Please check the attached screenshot.
In PDI it is fine and showing gap between Item and Requested for.
Can someone please help me on this.
@Ankur Bawiskar @Sid_Takali @Community Alums
Thanks,
Sattar
@Robbie Thanks for the reply. yes, I cloned the OOTB Widget to do changes.
Now the page look like this.
Now the thing is we need to align the gap between Item, Requested For and Stage.
Like 1/3rd space for each Item, 1/3rd space for Requested for and 1/3rd space for Stage.
So that the page looks perfect alignment. Could you please help me on this. I have added the HTML and CSS Code that i have used in the custom widget.
HTML:
<div ng-if="data.canRead && data.headless && data.urLink" class="alert alert-info" ng-class="{'none': c.hide}">
<span class="notification-icon icon-info"><span class="sr-only">${Info Message}</span></span>
${Some of these comments were hidden during ticket routing to protect your privacy. Refer to the originating ticket for current status and updates - }
<a href={{data.urLink}} class="alert-link alert-text">{{data.number.display_value}}</a>
<button type="button" class="close btn-icon icon-cross" aria-label="Close" ng-click="hideMessage()"></button>
</div>
<div ng-if="data.canRead && !data.hideHeader">
<div ng-if="data.primary_ticket_link" class="alert alert-warning">
<span class="notification-icon icon-alert"><span class="sr-only">${Info Message}</span></span>
${The information shown below may have additional updates. To view the latest record, <a href={{data.primary_ticket_link}} class="alert-link alert-text">click here</a>}
</div>
<div class="panel-body no-padder">
<div ng-if="!data.isEmpty" class= "form-group pull-left m-n">
<span class="label-color m-n text-xs">{{data.number.label}}</span>
<div class="form-control no-padder no-border no-bg" id="data.number.name">{{data.number.display_value}}</div>
</div>
<div ng-if="data.headerFields.length > 0" class="pull-right">
<div class= "form-group inline m-n"
ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)"
ng-repeat="field in data.headerFields"
ng-class="{'padder-md-r': !$last}">
<span class="label-color m-n text-xs">{{field.label}}</span>
<div ng-switch="field.type">
<div ng-switch-when="glide_date_time" title="{{field.display_value}}" class="form-control no-padder no-border no-bg">
<sn-time-ago timestamp="field.value"></sn-time-ago>
</div>
<div ng-switch-default ng-class="{'font-bold': field.name == 'state'}" class="form-control no-padder no-border no-bg">{{field.display_value}}</div>
</div>
</div>
</div>
</div>
<div class="panel b">
<div class="panel-heading bg-primary panel-la-jolla-default clearfix">
<div class="flex-display title-padding">
<h2 class="inline m-n m-r-sm" style="word-break: break-word;" tabindex="-1" id="short-desc">{{data.title}}</h2>
<div ng-if="!data.primary_ticket_link && c.data.currentActionWidget" class="inline pull-right action-btn">
<sp-widget widget="c.data.currentActionWidget" page="{table:data.table, sys_id: data.sys_id}"></sp-widget>
</div>
</div>
<div ng-if="c.data.description" ng-init="c.description_toggle = false">
<div ng-if="c.description_toggle" id="description-toggle" aria-hidden="{{!c.description_toggle}}">
<h4 class="title-padding break-word" ng-bind-html="description" ng-if="c.data.description.type=='html'"></h4>
<h4 class="title-padding break-word pre-wrap" ng-if="c.data.description.type!='html'">{{description}}</h4>
</div>
<button class="options-btn btn pull-left" id="wrapper" ng-click="c.description_toggle = !c.description_toggle" aria-expanded="{{c.description_toggle}}" aria-controls="description-toggle">
<div ng-show="!c.description_toggle">${Show more}</div>
<div ng-show="c.description_toggle">${Show less}</div>
<span style="font-size: 10px; padding-left:10px" class="glyphicon" ng-class="c.description_toggle ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'"></span>
</button>
</div>
</div>
<div ng-if="!data.show_info_widget && data.fields.length > 0">
<div class="panel-body">
<div class="ticket-fields text-whitespace" ng-class="{'show-less': c.showMore}" ng-if="data.fields.length > 0" id="std-tkt-fields">
<div class= "col-md-2 col-sm-3 col-xs-12 break-word adjust-height"
ng-if="(field.type != 'decimal' || field.type == 'decimal' && field.value != 0)"
ng-repeat="field in data.fields| filter: {type:'!workflow'}">
<div ng-switch="field.type">
<div ng-switch-when="glide_date_time" title="{{field.display_value}}">
<p class="label-color size text-xs header-text">{{field.label}}</p>
<span class="padding-sm" ng-if="field.name == 'due_date' || field.name == 'estimated_delivery'" data-toggle="tooltip" title="{{field.display_value}}">{{field.display_value}}</span>
<span ng-if="field.name != 'due_date' && field.name != 'estimated_delivery'"><sn-time-ago class="padding-sm" timestamp="field.value"/></span>
</div>
<div ng-switch-when="glide_list">
<p class="label-color size header-text text-xs">{{field.label}}</p>
<sn-avatar ng-if="field.reference == 'sys_user' && field.value" ng-repeat="user in field.user" data-toggle="tooltip" title="{{user.name}}" tabindex="0" ng-click="!data.isExternalUser ? openProfile(user.userID) : null" primary="user" enable-tooltip="false" enable-context-menu="true" show-presence="true" ng-style="{'cursor':data.isExternalUser?'default':'pointer'}" ng-attr-role="{{!data.isExternalUser ? 'link' : ''}}"></sn-avatar>
<span ng-if="field.reference != 'sys_user' && field.value">
<span ng-repeat="item in field.display_value" class="header-text">
<span data-toggle="tooltip" title="{{item}}">{{item}}</span>
<span ng-if="!$last">,</span>
</span>
</span>
</div>
<div ng-switch-default ng-if="field.type != 'glide_list'">
<sn-avatar ng-if="field.reference == 'sys_user' && field.value" class="pull-left" data-toggle="tooltip" title="{{field.user.name}}" tabindex="0" ng-click="!data.isExternalUser ? openProfile(field.user.userID) : null" primary=field.user enable-tooltip="false" enable-context-menu="true" show-presence="true" ng-style="{'cursor':data.isExternalUser?'default':'pointer'}" ng-attr-role="{{!data.isExternalUser ? 'link' : ''}}"></sn-avatar>
<p class="label-color size header-text text-xs">{{field.label}}</p>
<span ng-if="field.reference != 'sys_user' && field.value" class="header-text"><span data-toggle="tooltip" title="{{field.display_value}}">{{field.display_value}}</span></span>
<span ng-if="field.reference == 'sys_user' && field.value" ng-class="!data.isExternalUser ? 'btn-link' : null" ng-click="!data.isExternalUser ? openProfile(field.user.userID) : null" ng-attr-role="{{!data.isExternalUser ? 'link' : ''}}" ng-style="{'cursor' : data.isExternalUser ? 'default' : 'pointer'}" aria-label="{{field.label}} {{field.display_value}}" class="header-text align-tooltip" data-toggle="tooltip" title="{{field.display_value}}" tabindex="0">{{field.display_value}}</span>
</div>
</div>
</div>
</div>
<button class="options-btn btn show-more-controls visible-xs adjust-height" ng-click="c.showMore = !c.showMore" aria-expanded="{{!c.showMore}}" aria-controls="std-tkt-fields" ng-if="c.showControls">
<span>{{c.showMore? '${Show more}' : '${Show less}' }}</span>
<span style="font-size: 10px; padding-left:5px; padding-right:5px" class="glyphicon" ng-class="!c.showMore ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'"></span>
</button>
<div ng-repeat="field in data.fields|filter: {type:'workflow'}">
<div class="panel-body padder-t-none">
<p class="label-color size header-text text-xs">{{field.label}}</p>
<div class="padding-sm">
<sp-widget widget="field.stageWidget"></sp-widget></div>
</div>
</div>
</div>
</div>
<div ng-if="data.show_info_widget">
<hr>
<div class="panel-body">
<sp-widget widget= "c.data.info_widget" page="{table:data.table, sys_id: data.sys_id}"></sp-widget>
</div>
</div>
</div>
</div>
<div ng-if="!data.canRead || !data.canReadConfig" class="panel">
<h3>
${Sorry, either the data doesn't exist or you don't have access}
</h3>
</div>
CSS:
$sp-space--sm: 8px !default;
$sp-space--xxs: 2px !default;
.options-btn {
border: none;
background-image: none;
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: $brand-primary;
padding: 0px !important;
padding-top: 10px !important;
}
.options-btn:focus {
outline-offset: 0px;
}
.action-btn {
margin-left: auto;
}
.pre-wrap {
white-space: pre-wrap;
}
.flex-display {
display: flex;
align-items: center;
}
.title-padding {
padding-top: 5px;
padding-bottom: 5px;
}
.ticket-fields {
margin-left: -7px;
margin-right: -$sp-space--sm;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
.adjust-height {
min-height: 45px;
margin-bottom: 1%;
}
.grid {
grid: auto / auto auto;
display: grid;
}
.centre {
margin-bottom: auto;
margin-top: auto;
}
#wrapper {
display: flex;
align-items: center;
margin: auto;
}
.size {
margin: 0px !important;
}
hr {
margin: 0px !important;
}
.padder-md-r {
padding-right: 20px !important;
}
.padding-sm {
padding-left: 10px;
}
.avatar-container {
margin-top: $sp-space--xxs;
margin-right: $sp-space--xxs;
}
.header-text {
padding-left: 10px;
white-space: normal;
display: block;
margin-bottom: 0px;
width: auto;
}
.label-color {
color: $gray;
}
.alert-text {
font-weight: normal !important;
text-decoration: underline;
}
.notification-icon {
margin-right: $sp-space--xxs;
}
.header-text > .tooltip {
left: 10px !important;
}
.align-tooltip > .tooltip {
left: 50px !important;
}
@media only screen and (max-width: 767px) {
.show-less > div:nth-child(n+4) {
display: none !important;
}
.text-whitespace div > span {
white-space: normal !important;
}
.text-whitespace div > p {
white-space: normal !important;
}
.show-more-controls {
padding: 0 !important;
margin-left: 1.5rem !important;
}
.show-more-controls > span {
padding-left: 1rem !important;
}
}
Thanks,
Sattar
