Make service portal 'Ticket Fields' widget align properly

[sarahleighton]

Hi all

I've added a field to the 'Ticket Fields' widget on our Service Portal, and it's caused the fields to go out of alignment. Does anyone know how to correct this?

'Community member' and 'Updated' should be on the left

It's the OOB ticket fields widget, but here's the widget HTML:

<div ng-if="data.canRead" class="panel b">
<div class="panel-heading bg-primary panel-la-jolla-default">
<div ng-init="spSearch.targetRequests()">
<sp-c-link target="form" table="data.table" id="data.sys_id"/>
</div>
<h2 class="sr-only">${Ticket details}</h2>
<span ng-if="data.agent" >
${Agent working on this {{data.tableLabel}}}:
<div>{{data.agent}}</div>
</span>
<span ng-if="!data.agent && data.agentPossible" >${Your request has been submitted}</span>
<span ng-if="!data.agentPossible">${{{data.tableLabel}} record details}</span>
</div>

<div class="panel-body">
<dl class="ticket-fields" ng-if="data.fields.length > 0">
<dt class= "col-md-6 col-sm-12 col-xs-6 break-word"
ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)"
ng-repeat-start="field in data.fields">{{field.label}}</dt>
<dd class= "col-md-6 col-sm-12 col-xs-6 break-word"
ng-repeat-end ng-switch="field.type"
ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)">
<div ng-switch-when="glide_date_time" title="{{field.display_value}}">
<sn-time-ago timestamp="::field.value" />
</div>
<div ng-switch-default >{{field.display_value}}</div>
</dd>
</dl>
<div ng-if="data.variables.length > 0" ng-init="c.variable_toggle = true">
<button class="h4 options-btn btn" ng-click="c.variable_toggle = !c.variable_toggle" aria-expanded="{{c.variable_toggle}}" aria-controls="variables-toggle">
<span style="font-size: 12px;" class="glyphicon" ng-class="c.variable_toggle ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
${Options}
</button>

<div ng-if="c.variable_toggle" id="variables-toggle" aria-hidden="{{!c.variable_toggle}}">
<hr role="presentation">
<div class="m-b break-word" ng-repeat="variable in data.variables | filter:{visible_summary:true}">
<label class="m-t-xs m-b-none text-muted"><b>{{::variable.label}}</b></label>
<div ng-if="!variable.multi_row"><!-- variable type 27 corresponds to URL--><span ng-if="variable.type != 27" class="pre-wrap">{{::variable.display_value}}</span><a ng-if="variable.type == 27" class="pre-wrap" title="{{::variable.label}}" href="{{::variable.display_value}}" target="_blank">{{::variable.display_value}}</a></div>
<div ng-if="variable.multi_row">
<a href="javascript:void(0)" uib-popover-template="'sp_multirow_vs_summarizer.html'" popover-title="{{variable.label}}"
popover-placement="auto left" popover-append-to-body="true" popover-trigger="outsideClick">${Click to view}</a>
</div>
</div>
</div>
</div>
</div>

<div ng-if="data.agentPossible && !data.agent && options.pickup_msg" class="panel-footer">
<div id="ticket_fields_footer" class="text-center text-muted" style="font-style: italic;" ng-bind-html="data.pickupMsg">
</div>
</div>

</div>

Thanks in advance!

Sarah

[Allen Andreas]

Hello,

You can simply add the fields you want to include in the server script to the "var fields" line. In San Diego, for me, it's around line 16.

There's a comma separate list you just add it to. The HTML wouldn't normally be the right place to edit this or that others normally alter. It's the server script.

Please mark reply as Helpful/Correct, if applicable. Thanks!

[sarahleighton]

Hi

Yes it is in the Server script that I've added the fields on, and that works, but they're all out of alignment, and I was just guessing it would be the HTML I'd need to edit to sort out the alignment, that could be completely wrong though

Thanks

[Allen Andreas]

Hi,

My apologies, we wouldn't know that you did that when you only mentioned the HTML script. I didn't read line by line through the HTML to see if you somehow hardcoded that in or not. Also, please use the appropriate forum feature "Insert/Edit code sample" when pasting code on the forums so that it remains organized and easier to read 🙂

When I did the same and added the assignment group and the assigned to and chose essentially the longest named results I could find, it still remained consist with its layout:

You can try removing the Community Member field and see if that resolves your issue, if so, try using an alternate field or test with a different user with a shorter name...and then if that still doesn't resolve it, then yes, perhaps there can be something with the HTML to use, but I didn't want to go in to all that given my own test that I had done where I have pretty long length values and it still remains formatted.

Did you change or do anything else?

Please mark reply as Helpful/Correct, if applicable. Thanks!

[Eitan_B · Accepted solution]

it is very possible that the container in which the widget is sitting in, is too small, and or the container is fixed and not 'fluid'.