I need help formatting option text in the Ticket Fields widget

[JohnScarlata]

Im trying to modify the output of the ticket fields widget so that the content is not in onle long narrow column.  We have a number of end users that are new to the platform and are having trouble with this form.  When the details of a ticket come out in the long narrow column, some poeple complain that they cant find the order details.  others are screen printing, dont ask me why, and it comes out in multiple pages.  I'm able to reformat the ticket page to display the ticket fields widget under the ticket conversations widget, and i can make it a wide column, but the data is still coming out in a single long column...pic attached.

caveat - i am not a developer so i need some help in how to modify this widget to display the text in a wider array so that its one page and not a long skinny column..

[vkachineni]

Please post the HTML of the widget

[JohnScarlata]

here is the HTML of the widget, thanks for the help

<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" 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-n">{{variable.label}}</label>
<div>{{variable.display_value}}</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>

[vkachineni · Accepted solution]

//Try this HTML. See the comments.

<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" 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">
				
				<!-- Trying to reformat variables start-->
				<div class="row">
				  <div ng-repeat-start="variable in data.variables | filter:{visible_summary:true}" class="col-md-4">
					<label class="m-n">{{variable.label}}</label>
                    <div>{{variable.display_value}}</div>
				  </div>
				  <div ng-repeat-end ng-if="$index % 3 == 0" class="clearfix"></div>
				</div>
				<!-- Trying to reformat variables end-->
				
            </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>

[JohnScarlata]

this is great, it works quite well and fits a 9 x 3 container perfectly.  the only thing id like to try is making the variable labels bold, the way it works now having the labels bold will make it even easier for people to read.  thank you for the help with this