Comment 0 for bug 1640019

Abstract horizon table code as following:

            if ($new_row.hasClass('warning')) {
              var $container = $(document.createElement('div'))
                .addClass('progress-text horizon-loading-bar');

              var $progress = $(document.createElement('div'))
                .addClass('progress progress-striped active')
                .appendTo($container);

              $(document.createElement('div'))
                .addClass('progress-bar')
                .appendTo($progress);

              // if action/confirm is required, show progress-bar with "?"
              // icon to indicate user action is required
              if ($new_row.find('.btn-action-required').length > 0) {
                $(document.createElement('span'))
                  .addClass('fa fa-question-circle progress-bar-text')
                  .appendTo($container);
              }
              $new_row.find("td.warning:last").prepend($container);
            }

When progress bar should be displaced, an image would be placed before the table text. The result is a long process bar displaying before a short text, and column become two line. The visual effect is poor. How ever, if we change 'prepend' to 'wrapInner', the text would be placed over the progress bar, and the colume keep single line.

              $new_row.find("td.warning:last").prepend($container);
=> $new_row.find("td.warning:last").wrapInner($container);