Word Wrap in Portal Widget

[Rocky5]

Hey Experts,

I am pulling data from table to the portal widget, And my issue is the text is not being wrapped. If the text is too long it doesn't display the full text as below.

HTML Script:

<div class="row" style="padding-top: 0px;">
<div style="float:left;padding-right: 10px;">
<a target="_blank" ng-href="/{{item.prjctName.prjSysClass}}.do?sys_id={{item.prjctName.prjsysid}}">{{item.prjctName.prjnum}}</a>
</div>
<div style="float:left;padding-right: 10px; word-break: break-all; word-wrap: break-word;">
<strong> {{item.prjctName.prjname}}</strong>
</div>
</div>

Any help is appreciated.

Thanks,

Rocky.

[Alikutty A]

Hi,

Can you paste the complete HTML and CSS of your widget to give a better understanding?

Thanks!

[Rocky5]

Sure.

HTML CODE: 

<div id="tc-grid">
<div class="grid-header clearfix">
<span class="tc-grid-header">${Logged Time Cards}</span>
<span class="pull-right clearfix" ng-if="::data.canCreateTimecards">
<span class="fa fa-question-circle pull-right" uib-tooltip="${Search any task that you have worked during the week and add to the Time Sheet.}" tooltip-placement="left" aria-label="${Help}"></span>
<button type="button" class="btn btn-link pull-right" ng-click="addTask()" id="add-task" aria-haspopup="true">${Add unassigned tasks to Time Sheet}</button>
</span>
</div>
<div class="tc-grid-cntr" ng-if="data.list.length">
<div class="table-responsive">
<table class="table" role="grid" ng-class="{'table-hover': data.canCreateTimecards}" id="tc-grid-table">
<thead>
<tr>
<th scope="col" ng-repeat="field in ::data.fields track by $index" class="header-{{field}}" ng-class="{'selected':data.highlightedField == field}">
<div class="th-title {{field}}"><strong>{{::data.column_meta[field].label}}</strong></div>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data.list track by item.sys_id" class="tc-row" id="{{::item.sys_id}}" ng-class="{'active': data.timecardInEditMode == item.sys_id, 'disabled': !item.canEdit, 'rejected-desc' : item.state.value === 'Rejected'}" tabIndex="{{item.canEdit ? 0 : -1}}" ng-dblclick="editRow($event, item);" ng-keydown="keyHandler($event, item, $index)" aria-disabled="{{!item.canEdit}}" role="row" aria-selected="{{data.timecardInEditMode == item.sys_id}}" aria-label="${ Total hours for task {{item['task.short_description'].value}} is {{item['total'].value}} and the state is {{item['state'].display_value}}}">
<td ng-repeat="field in ::data.fields" class="{{::field}}" data-field="{{::field}}" data-th="{{::data.column_meta[field].label}}" ng-class="{'selected':data.highlightedField == field}" role="gridcell">
<div class="{{field}}" ng-if="data.timecardInEditMode != item.sys_id || !data.column_meta[field].editable">
<div class="tc-value" ng-class="{'disp-flex align-center' : $first}">
<span ng-if="$first" class="state-icon" uib-tooltip="${State: {{item['state'].display_value}}}" tooltip-placement="right" tooltip-append-to-body="true" ng-class="{'icon-workflow-pending' : (item['state'].value === 'Pending'), 'icon-workflow-progress' : (item['state'].value === 'Submitted'), 'icon-workflow-check' : (item['state'].value === 'Processed' || item['state'].value === 'Approved'), 'icon-workflow-rejected' : (item['state'].value === 'Rejected')}"></span>
<span class="tc-desc" uib-tooltip="{{item[field].display_value}}" tooltip-enable="$first" tooltip-placement="auto top-left" tooltip-append-to-body="true" ng-if="(((field === 'rate_type')||(data.isProjectActive && field === 'project_time_category')) && !item[field].value)">${None}</span>
<span class="tc-desc" uib-tooltip="{{item[field].display_value}}"
tooltip-enable="$first" tooltip-placement="auto top-left" tooltip-append-to-body="true"
ng-if="!(((field === 'rate_type')||(data.isProjectActive && field === 'project_time_category')) && !item[field].value)">
<span>
<p class="text-elipsis">{{item[field].display_value}}</p>
<div ng-if="field === 'task.short_description' && item[field].number">
<div class="row">
<a target="_blank" ng-href="/{{::item['task.sys_class_name'].value}}.do?sys_id={{::item['task.sys_id'].value}}">{{item[field].number}}</a>
</div>

<div class="row" style="padding-top: 0px;">
<div style="float:left;padding-right: 10px;">
<a target="_blank" ng-href="/{{item.prjctName.prjSysClass}}.do?sys_id={{item.prjctName.prjsysid}}">{{item.prjctName.prjnum}}</a>
</div>
<div style="float:left;padding-right: 10px; word-break: break-all; word-wrap: break-word;">
<strong> {{item.prjctName.prjname}}</strong>
</div>
</div>
</div>
</span>

</span>

<a href="JavaScript:void(0);" ng-if="$first && item.isDuplicate && (data.timecardInEditMode != item.sys_id)" uib-popover-template="'mergeTc'" popover-class="duplicate-popover" popover-animation="true" popover-placement="auto right" popover-trigger="outsideClick" popover-append-to-body="true" popover-is-open="data.mergePopover{{item.sys_id}}" class="duplicate-tc fa fa-exclamation-triangle" ng-click="adjustPopover($event)" uib-tooltip="${Merge Duplicate Time cards}" tooltip-placement="auto right" tooltip-append-to-body="true" tooltip-is-open="data.mergeTp{{item.sys_id}}" ng-mouseover="tooltipEnable($event,true)" aria-label="show or hide merge timecards popover" role="button"></a>
</div>
</div>
<div ng-if="data.timecardInEditMode == item.sys_id && data.column_meta[field].editable && (field !== 'rate_type' && field !== 'project_time_category')" class="edit_mode">
<label class="sr-only" for="{{field}}">{{field}}</label>
<input type="text" id="{{field}}" name="{{field}}" ng-model="item[field].display_value" class="tc-row-input day-input" ng-class="{'error': item[field].invalid}" ng-change="validateInput(item[field])" aria-invalid="{{item[field].invalid}}" aria-required="true" required/>
</div>
<div ng-if="data.timecardInEditMode == item.sys_id && data.column_meta[field].editable && (field === 'rate_type') && (item.state.value === 'Pending' || item.state.value === 'Rejected')" class="edit_mode">
<label class="sr-only" for="{{field}}">{{field}}</label>
<input type="text" id="{{field}}" name="{{field}}" ng-model="item[field].display_value" class="tc-row-input" ng-class="{'error': item[field].invalid}" aria-invalid="{{item[field].invalid}}"/>
</div>
<div ng-if="data.timecardInEditMode == item.sys_id && data.column_meta[field].editable && (field === 'project_time_category') && data.isProjectActive" ng-class="{edit_mode:(item['isProjectWork']) }">
<label class="sr-only" for="{{field}}">{{field}}</label>
<span ng-if="!(item['isProjectWork'])">${None}</span>
<input ng-if = "(item['isProjectWork'])" type="text" id="{{field}}" name="{{field}}" ng-model="item[field].display_value" class="tc-row-input" ng-class="{'error': item[field].invalid}" aria-invalid="{{item[field].invalid}}"/>
</div>
</td>
<td data-id="{{::item.sys_id}}">
<a href="JavaScript:void(0);" class="icon-ellipsis-vertical more-action-btn" popover-animation="true" uib-popover-template="'tcMoreActions'" popover-animation="true" popover-placement="auto left" popover-trigger="outsideClick" popover-is-open="data.tcPopover{{item.sys_id}}" popover-class="more-action-popover" ng-click="adjustPopover($event)" role="button" aria-label="${More Actions}" uib-tooltip="${More Actions}" tooltip-placement="auto left" tooltip-append-to-body="true" tooltip-is-open="data.moreActionTp{{item.sys_id}}" ng-mouseover="tooltipEnable($event,false)"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div ng-if="!data.list.length">
<div id="empty-state">
<div style="font-size:12px;text-align:center;margin-top: 50px;">${No Time Cards logged yet.}</div>
<div style="margin-top:30px;text-align:center;" ng-if="::data.canCreateTimecards">
<button type="button" class="btn btn-default" ng-if="data.canGenerateTimeCards" ng-click="generateTimecards()">${Generate Time Cards}</button>
<button type="button" class="btn btn-default" ng-click="copyFromPreviousTimesheet()" aria-haspopup="true">${Copy from previous Time Sheet}</button>
</div>
</div>
</div>
<sp-widget widget="data.modalInstance" ng-if="data.modalInstance"></sp-widget>
<pw-confirm-dialog data="data.confirmDialogOpts" ng-if="showConfirm"></pw-confirm-dialog>
</div>

CSS CODE:

#tc-grid{
.tc-grid-cntr {
height: calc(100vh - 439px);
overflow: auto;
}
.grid-header{
padding: 15px 20px;
background: $gray-lighter;
position: relative;
.tc-grid-header {
font-size: 16px;
font-weight: 600;
line-height: 20px;
}
#add-task{
padding: 0;
border: none;
color: $link-color;
font-size: 12px;
line-height: 20px;
text-align: right;
&:hover, &:focus{
text-decoration: underline;
}
}
.fa-question-circle{
height: 20px;
width: 16px;
color: $btn-default-border;
font-size: 18px;
font-weight: 500;
line-height: 20px;
text-align: right;
}
}
.table-hover > tbody > tr {
&:hover {
background: $state-info-bg !important;
}
}
.table-responsive{
margin-top: 0px;
overflow-x: hidden;
.table{
table-layout: fixed;
margin: 0;
font-size: 13px;
padding: 15px;
margin-bottom: 1px;
.grid-action{
padding: 2px;
font-size: 18px;
opacity: 0;
display: inline-block;

&:focus{
opacity: 1;
}
}
.sunday, .monday, .tuesday, .wednesday, .thursday, .friday, .saturday, .total {
text-align : center;
}
thead{
tr{
th{
border: none;
border-top: 3px solid $body-bg;
color: $text-color;
min-width: 64px;
padding: 12px;
font-size: 12px;
line-height: 15px;
font-weight: 600;
&:first-child {
width : 18%;
padding: 12px 20px;
}
&.header-project_time_category {
width: 14%;
padding: 12px 20px;
}
&.header-rate_type {
width: 9%;
padding: 12px 20px;
}
&:last-child {
min-width: 40px;
width: 40px;
padding: 0;
text-align: center;
}
}
}
}
tbody{
padding: 15px;
tr:nth-child(odd) {
background-color: $gray-lighter;
}
tr.disabled{
cursor:default;
outline: 0 !important;
}
tr{
cursor: pointer;
padding: 15px;
td{
&:first-child {
max-width: 153px;
position:relative;
.tc-desc {
position: relative;
top: -2px;
}
}
&:last-child {
min-width: 40px;
width: 40px;
padding: 0;
text-align: center;
}
color: $btn-primary;
font-size: 12px;
font-weight: 600;
padding: 12px 20px;
vertical-align: middle;
border: none;
.state-icon {
margin-right: 6px;
font-size: 16px;
position:relative;
top: -2px;
padding:1px;
}
.icon-workflow-progress {
color: $brand-primary;
}
.icon-workflow-rejected {
color: $brand-danger;
}
.icon-workflow-check {
color: $brand-success;
}
.icon-ellipsis-vertical {
color: $brand-primary;
}
.tc-value {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width:200px;
.state-popover {
margin-top:2px;
width: 105px;
background-color:$gray-base;
color:$body-bg;
box-shadow: none;
.arrow{
display:none;
}
}
.duplicate-tc {
position: absolute;
right: 5px;
top: 18px;
color: $brand-warning;
font-size: 10px;
}
.popover-content {
padding: 8px;
font-size: 12px;
}
}
.edit_mode{
text-align: center;
input{
width: 25px;
text-align: center;
background-color: transparent;
box-shadow: none;
border: none;
border-bottom: 2px solid transparent;

&:focus{
border-color: $btn-primary-border;
box-shadow: none;
}
}
input.error{
border-bottom-color: $brand-danger !important;
}
.grid-action{
opacity: 1;
}
}
}
&:focus{
outline-offset: 0;
-webkit-box-shadow: inset 0 3px 5px $color-shadow;
box-shadow: inset 0 3px 5px $color-shadow;
}
&:hover, &:focus{
.grid-action{
opacity: 1;
}
}
}
}
}

.table-hover > tbody > tr.active, .table > tbody > tr.active{
outline: 1px solid $brand-primary !important;
outline-offset: 0;
-webkit-box-shadow: inset 0 3px 5px $color-shadow;
box-shadow: inset 0 3px 5px $color-shadow;
td.rate_type, td.project_time_category {
padding: 0px 5px 0 20px;
.select2-container {
text-align: left;
.select2-arrow {
border: none;
}
}
}
}

.table-hover > tbody > tr.active > td, .table-hover > tbody > tr.active > td{
background-color: $gray-lighter !important;
background-image: none;
}
}

#empty-state{
.btn{
display: block;
margin: 0 auto;
background-color: $color-lighter;
border: 1px solid $color-light;
min-width: 202px;
}
.btn + .btn {
margin-top: 18px;
}
}
}
.popover {
padding: 0;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .1);
border: 1px solid $gray-lighter;
}
.popover-content {
padding: 0;
}
.more-actions-cntr {
border: 1px solid #d8d8d8;
border-radius:6px;
.context_menu {
font-size:12px;
margin-top: 0px;
list-style: none;
padding: 0;
margin-bottom: 0;
}
.context_menu li {
a {
color : $link-color;
}
padding: 6px 20px 6px 15px;
&:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
&:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
&:hover{
background-color: $body-bg;
a {
color: $link-hover-color;
}
}
}
li.delete_disabled{
cursor: not-allowed;
pointer-events: none;
a{
color: #ccc;
}
}

}
th.selected, td.selected{
background-color: $state-info-bg;
position: relative;
}
th.selected{
border-top: 3px solid $brand-primary !important;
}
tr.rejected-desc{
background-color: $state-danger-bg !important;
border-top: 1px solid $body-bg !important;
border-bottom: 1px solid $border-bg !important;
}
.more-action-btn, .more-action-btn:hover, .more-action-btn:active, .more-action-btn:visited, .more-action-btn:focus, .duplicate-tc, .duplicate-tc:hover, .duplicate-tc:active, .duplicate-tc:visited, .duplicate-tc:focus {
text-decoration:none;
}
.more-action-btn{
display:inline-block;
padding:14px;
color:$link-color !important;
&:hover{
color:$link-hover-color !important;
}
}
.more-action-popover{
box-shadow:none;
margin-left:0px !important;
.popover{
border:none;
}
.arrow{
right:-10px !important;
border-left-color:$gray-light;
}
}
#empty-state {
height: calc(100vh - 439px);
overflow: auto;
}
.disp-flex {
display: flex;
}
.align-center {
align-items: center;
}
.text-elipsis {
max-width: 153px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0px;
}