Складная строка таблицы не выходит за ширину ячейки - PullRequest
Новая
       13

Складная строка таблицы не выходит за ширину ячейки

0 голосов
/ 11 июня 2018

У меня есть таблица со знаком +/-, которую можно нажимать.Когда пользователь нажимает на него, он открывает div ниже, чтобы раскрыть больше деталей.Проблема, с которой я сталкиваюсь, заключается в том, что разборный div имеет ширину всего в один столбец таблицы, и мне кажется, что я не могу получить его на всю ширину.

Вот скриншот таблицы со свернутыми строками:

enter image description here

А вот как это выглядит при расширении:

enter image description here

Мой HTML-код выглядит следующим образом: 

<div class="table-row" ng-repeat="work in item.work_history | orderBy: '-to' track by $index">
   <div class="table-cell" style="vertical-align: middle;" >
      <a class="flex collapsed"
         ng-class="{'accordion-toggle collapsed':work.campaign.length>0}"
         ng-if="work.campaign.length>0" data-toggle="collapse"
         ng-click="c.campaign(work)" href="#{{work.sys_id}}"
         role="button" aria-expanded="false" aria-controls="collapseDetails">
      </a>
   </div>
   <div class="table-cell">
      <a href="javascript:void(0)" title="Edit Work History"
         ng-click="c.newEntry(work.sys_id,'x_dnf_gw_found_work_history','newWork');">
        Edit
      </a>
   </div>
   <div class="table-cell">
      {{work.work_name}}
   </div>
   <div class="table-cell">
      {{work.from}}
   </div>
   <div class="table-cell">
      {{work.to}}
   </div>
   <div class="table-cell">
      <button title="Add Campaign" type="button" class="btn btn-link btn-xs"
              ng-click="c.newEntry(-1, 'x_campaigns','newWork')">
         Add Campaign
      </button>
   </div>
</div>
<div class="collapse" id="{{campaignDetails}}">
   <ul>
      <li ng-repeat="campaigns in c.campaign_details">
         {{campaigns.from}} - {{campaigns.to}}: {{campaigns.camp}}
      </li>
   </ul>
</div>

Я знаю, почему расширенные детали отображаются в одной ячейке таблицы, но я не уверен, как решить эту проблему стилей.Спасибо за любую помощь!

1 Ответ

0 голосов
/ 12 июня 2018

Добавьте class "table-row" в ваше складное подразделение 

<div class="table-row" ng-repeat="work in item.work_history | orderBy: '-to' track by $index">
   <div class="table-cell" style="vertical-align: middle;" >
      <a class="flex collapsed" ng-class="{'accordion-toggle collapsed':work.campaign.length>0}" ng-if="work.campaign.length>0" data-toggle="collapse" ng-click="c.campaign(work)" href="#{{work.sys_id}}" role="button" aria-expanded="false" aria-controls="collapseDetails"></a>
   </div>
   <div class="table-cell">
      <a href="javascript:void(0)" title="Edit Work History" ng-click="c.newEntry(work.sys_id,'x_dnf_gw_found_work_history','newWork');">Edit</a>
   </div>
   <div class="table-cell">
      {{work.work_name}}
   </div>
   <div class="table-cell">
      {{work.from}}
   </div>
   <div class="table-cell">
      {{work.to}}
   </div>
   <div class="table-cell">
      <button title="Add Campaign" type="button" class="btn btn-link btn-xs" ng-click="c.newEntry(-1, 'x_campaigns','newWork')">Add Campaign</button>
   </div>
</div>
<div class="collapse table-row" id="{{campaignDetails}}">
   <ul>
      <li ng-repeat="campaigns in c.campaign_details">
         {{campaigns.from}} - {{campaigns.to}}: {{campaigns.camp}}
      </li>
   </ul>
</div>
...