question Re: How to give space between Catalog Item Name and Requested For in Portal in Developer forum

How to give space between Catalog Item Name and Requested For in Portal

sattar3 — Wed, 03 Jul 2024 09:53:39 GMT

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

Re: How to give space between Catalog Item Name and Requested For in Portal

Dr Atul G- LNG — Wed, 03 Jul 2024 10:03:07 GMT

Might be browser issue, zoom in / out. or in PDI and other instance you are using the standard ticket configuration.

Re: How to give space between Catalog Item Name and Requested For in Portal

sattar3 — Wed, 03 Jul 2024 10:12:32 GMT

@Dr Atul G- LNG Thanks for the reply.

It's not a browser issue, i tried by zoom in/ out as well.

Same Widget in both instances. Widget Name: "Standard Ticket Header"

Thanks,

Sattar

Re: How to give space between Catalog Item Name and Requested For in Portal

Dr Atul G- LNG — Wed, 03 Jul 2024 10:54:42 GMT

Pheww... Sorry mate no idea then @sattar3

Re: How to give space between Catalog Item Name and Requested For in Portal

Robbie — Wed, 03 Jul 2024 11:23:26 GMT

Hi @sattar3,

As a starting point can you check the CSS against the Standard Ticket Header widget.

Review the version of the CSS to check to see if and how's it's changed from the original

To do this, press CTRL and right click with the mouse pointing over the widget itself and select 'Widget in Editor' - this will open up the widget.

Next, check to see if you have the 'Versions' related list at the bottom of the form. If not, configure the form and simply add the Version related list to the form.

Next, go to the first or earlier versions and right click over the version and select 'Compare with current'.

This may shed some light as to what's changed.... the CSS is a good place to start.

To help others (or for me to help you more directly), please mark this response correct by clicking on Accept as Solution and/or Kudos.

Thanks, Robbie

Re: How to give space between Catalog Item Name and Requested For in Portal

Ankur Bawiskar — Wed, 03 Jul 2024 12:30:45 GMT

@sattar3

Possibly because of long catalog item name?

both the instances are on same release? did you compare the widget?

Re: How to give space between Catalog Item Name and Requested For in Portal

sattar3 — Wed, 03 Jul 2024 12:50:45 GMT

@Ankur Bawiskar Thanks for the reply.

Both instances are in Washington DC.

Catalog Item Name: "Test Catalog Item" this is not a long catalog item name.

I renamed the item name to "Test Test Test Catalog Item"-if the item name is long then it shows like in the below screenshot. The text enters in Requested for name it's also an issue.

Thanks,

Sattar

Re: How to give space between Catalog Item Name and Requested For in Portal

Robbie — Wed, 03 Jul 2024 14:59:45 GMT

Hi @sattar3,

Have you seen my post and checked the CSS against the widget?

It's not the naming of the Catalog item.

To help others (or for me to help you more directly), please mark this response correct by clicking on Accept as Solution and/or Kudos.

Thanks, Robbie

Re: How to give space between Catalog Item Name and Requested For in Portal

sattar3 — Thu, 04 Jul 2024 01:55:49 GMT

@Robbie yes, I compared the CSS for in both instances there is no difference and no versions also available.

I removed "text-overflow and overflow" from CSS the result is like this now

.header-text {
padding-left: 10px;
text-overflow: ellipsis; //removed from our instance
overflow: hidden; // removed from our instance
white-space: nowrap;
display: block;
margin-bottom: 0px;
}

OOTB behavior in our instance is like in the below screenshot, customer wants to show the full name of the Item and Requested for Full name

Please help me on this.

Thanks,

Sattar

Re: How to give space between Catalog Item Name and Requested For in Portal

Robbie — Thu, 04 Jul 2024 14:49:51 GMT

Hi @sattar3,

Ok, so the .header-text CSS looks to be similar to out of box. I was going to say that becuase you have no versions I'd guess it's still the Out Of Box widget, but if you've removed / stripped out the text overflow that you must have cloned this widget? Can you confirm...

Can you also provide a screen shot (blocking out sensitive / PII data of course) of the entire page or main header section please... I'm wondering if you have a container or widget at a higher level overriding this CSS I can't see why anyone would want to override the CSS as the widget already caters for padding and a large number of fields etc... something strange is definitely going on so I'm guessing it's at a page / container level and something else overriding.

To help others (or for me to help you more directly), please mark this response correct by clicking on Accept as Solution and/or Kudos.

Thanks, Robbie

Re: How to give space between Catalog Item Name and Requested For in Portal

sattar3 — Fri, 05 Jul 2024 06:20:57 GMT

@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-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;
}
}

@Sid_Takali

Thanks,

Sattar