Add elements below row <td>

css grid
flexbox
bootstrap grid
grid-template-columns
flexbox force new row
grid-template-rows
flex break to new row
grid-auto-rows

In my angularjs app there a rows (using ng-repeat), created through . The code creating rows is below:

<tbody>
    <tr ng-repeat="data in downloads">
        <td data-title="ID">{{$index + 1}}</td>



        <td data-title="User">{{data.user_name}}</td>
        <td data-title="Issue">{{data.download_name}}</td>
        <td data-title="Progress">{{data.size}}</td>

        <td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
        <td class="information-parent" data-title="More">
            <md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
        </td>
    </tr>
</tbody>

I'm trying to implement something that when you click the arrow, the row expands with information appearing like this: I however can not get the information to appear along the bottom like that. What should I be trying to implement to get text along the bottom - flex box, inline-box ?

Take a look at Bootstrap collapse.js. I think this is what you are looking for, of course, you have to change it in order to meet your needs.

Seven Ways You Can Place Elements Using CSS Grid Layout , In the demo below, element A has been placed in the second row and second column using the CSS Grid Example Using grid-row and grid-column That's why we had to add the dots instead of leaving it completely blank. Required in Firefox and Opera, optional in IE, Chrome and Safari. A number that specifies the position of the row to insert (starts at 0). The value of 0 results in that the new row will be inserted at the first position. The value of -1 can also be used, this results in a new row being inserted at the last position.

Try below code for your scenario.

(function(ng, app){

    app = angular.module('app', [])

    app.controller("mainController", ['$scope',
      function($scope) {
        $scope.downloads = [{
            "user_name": "John",
            "download_name": "Doe jhonejhonejhone",
            "size": "0 byte"
          },
          {
            "user_name": "Anna",
            "download_name": "Doe DoeDoeDoeDoe",
            "size": "0 byte"
          },
          {
            "user_name": "Maron",
            "download_name": "Anna DoeDoeDoeDoeDoe",
            "size": "5 byte"
          }
        ];

        $scope.editFiles = function() {
          $scope.editBar = true;
        };

        $scope.remove = function(index) {
          $scope.downloads.splice(index, 1);
        };

      }
    ]);

}(angular));
.btn-primary{
    margin-right: 10px;
}
<html ng-app="app">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container" ng-controller="mainController">
    <div class="row">
      <div class="col-md-12">
        <input type="submit" class="btn btn-primary addnew pull-left" value="Edit Files" ng-click="editFiles()">
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-body">
            <form>
              <table border=1 class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>
                      <b> # </b>
                    </th>
                    <th>User</th>
                    <th>Download Name</th>
                    <th>Complete Name</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="data in downloads">
                    <td>
                      <b> {{$index + 1}} </b>
                    </td>
                    <td>
                      {{data.user_name}}                   
                    </td>
                    <td>
                      {{data.download_name}}
                      
                      <div class="btn-group pull-right" ng-show="editBar">
                        <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
                        <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" ng-click="remove($index)"></span></button>
                      </div>
                      
                    </td>
                    <td>
                      {{data.size}}
                    </td>
                  </tr>
                </tbody>
              </table>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Breaking to a new row with flexbox, Using an element to break to a new flex row comes with an interesting effect: we If we then want to add another row of items below that row:. In my angularjs app there a rows (using ng-repeat), created through . The code creating rows is below: &lt;tbody&gt; &lt;tr ng-repeat="data in downloads"&gt; &lt;td data-title="ID"&g

You can try the following:

  1. move your ng-repeat to your tbody
  2. add ng-init="data.showSubRow = false" to your tbody
  3. add another row to the tbody that should only be visible when showSubRow is true

so your ng-repeat would look like

<tbody ng-repeat="data in downloads" ng-init="data.showSubRow = false">
    <tr>
        visible row
    </tr>
    <tr ng-show="data.showSubRow">
        visible when clicked
    </tr>
</tbody>

now you can add individual buttons in each row to show / hide content on individual rows or add an edit all function that would make all subrows visible

show / hide individual row

   <tr>
        <td data-title="ID">
            {{$index + 1}
            <span>
                <button ng-show="!data.showSubRow" ng-click="data.showSubRow = true">+</button>
                <button ng-show="data.showSubRow" ng-click="data.showSubRow = false">-</button>
            </span>
        </td>
        <td data-title="User">{{data.user_name}}</td>
        <td data-title="Issue">{{data.download_name}}</td>
        <td data-title="Progress">{{data.size}}</td>

        <td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
        <td class="information-parent" data-title="More">
            <md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
        </td>
    </tr>

display all

  $scope.editAll = function(){
    angular.forEach($scope.downloads, function(value, key) {
      value.showSubRow = !value.showSubRow;
    });
  }

Working sample ----> Demo

Grid system · Bootstrap, Bootstrap's grid system uses a series of containers, rows, and columns to layout Below is an example and an in-depth look at how the grid comes together. to a new line in flexbox requires a small hack: add an element with width: 100%  I have a table of a long list of information. If one row is clicked on I want to make that perticular one expand with extra stuff/elements without disrupting the display of the other elements: its

Tensor Analysis, Divide the corresponding row by the value of the diagonal element. Make the elements above and below the diagonal element zero by adding to each row a  You can add up to 10 columns. The Inner Section widget use is to create nested columns within a section. This way you can create complex layouts. Drag an Inner Section Widget to your column; As a default, you will get a section with two columns; You can add or remove columns by right-click the columns handle icon

row-gap (grid-row-gap), The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows. Into an additional column, I would like to add some other data from another cell array. This additional cell array has two columns. The first one identifies to which row the data belongs, while the seconds one contains the additional data.

Advanced Engineering Mathematics, Now add scalar multiples of row one to the other rows to obtain zeros below the leading entry of 2. In the matrix B, highlight the elements in column two below  You can use the jQuery .append() method to append or add rows inside a HTML table. Similarly, you can use the .remove() method to remove or delete table rows as well as all everything inside it from the DOM dynamically with jQuery.

Comments
  • I'm trying to do this without importing any external files. I don't mind about animations yet. I'm just stuck on getting text to appear along the bottom of the row
  • @Ben10 you could use a javascript function to toggle display then. If you don't wish to add javascript I don't know then.
  • I'm just trying to prototype it
  • So I without getting into fancy js (static HTML is fine), I want to have text along the bottom of the row underneath everything else, like in the gif
  • When I try achieve the same thing it aligns in line with the row, but not below