Table cell with button aligned to the right

Canvas Canvas Questions
1

I have a table with a cell that contains a dbr and a button. This button should be aligned to the right of the dbr.

<td ng-repeat="c in page.columns" ng-style="{ width: c.Width + '%' }">
    <span>
        <tm1-ui-dbr>...</tm1-ui-dbr>
        <button type="button" class="btn btn-primary"
                title="Select Financial Instrument" ng-click="selectCompanies()"
                style="float: right;">
            <i class="fa fa-pencil-square-o"></i>
        </button>
    </span>
</td>

With the html given above the button is displayed under the dbr and not to the right. What do I have to change to make it appear on the right?

EDIT: The dbr actually generates a form html element and buttons by default go below a form. So I guess that this is part of the problem

2

I solved the problem with the help of SO(the accepted answer worked):
https://stackoverflow.com/questions/44517998/align-button-to-the-right-in-td-element

3

Hi @Roland,

Thanks for the update! By the way, the above, td element, were you using a CSS class on the table element itself (i.e. class=“table”)?

On the above part, how many columns were in the table?

–
Paul

4

Hi @plim

By the way, the above, td element, were you using a CSS class on the table element itself (i.e. class=“table”)?

the td element is exactly as quoted.

My table has the following class:

<table class="table table-condensed table-hover table-striped ng-table">

On the above part, how many columns were in the table?

The table has 7 columns in total.

5

Hi @Roland,

Thanks! Was just curious on this because when I tried the above (I had just updated the table in an active form output for sample purposes) it shows like this:

image.png1459×272 13 KB

Though at a lower resolution / smaller screen, it looks like this:

image.png1111×310 12.7 KB

And this is how how my HTML looks like:

<td class="text-right" ng-repeat="period in ['All Months', '01', '02', '03', '04', '05', '06',]">
   <tm1-ui-dbr>...</tm1-ui-dbr>

   <button type="button" class="btn btn-primary"
           title="Select Financial Instrument" ng-click="selectCompanies()">
     <i class="fa fa-pencil-square-o"></i>
   </button>
</td>

With the exception of the ng-style and extra span.

Anyways, thanks again for posting the article!

Just wanted to post the above screenshots. What you might have encountered could be due to how Bootstrap naturally handles the view, depending on screen resolution.

Cheers!

–
Paul

1 Like