Menu icon Foundation
align dropdown to the right of td element

I have table with 5 columns which spans a large-8 column row in Foundation. The last < td > contains a clickable icon which when clicked, it shows a dropdown. Unfortunately, when the dropdown is displayed, it goes beyond the right part of the browser. See screenshot - http://i.imgur.com/3DwkJyp.png

I noticed that the dropdown when displayed, is aligned to the left side of the last < td >. See screenshot using chrome dev tools - http://i.imgur.com/wUp6KWL.png

I would like the dropdown appear right aligned of that since it's the last column.

And this is what I want to achieve - http://i.imgur.com/r2u8DI0.png

Here is the current code that I have

    <table>
      <thead>
        <tr>
          <th>Field 1</th>
          <th>Field 2</th>
          <th>Field 3</th>
          <th>Field 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>value 1</td>
          <td>value 2</td>
          <td>value 3</td>
          <td>value 4</td>
          <td dropdown-toggle="#menu" class="text-right form-control"> <i class="fi-list small"></i>
            <div class="floatright">
              <ul id="menu" ng-model="menuProperty" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="true" ng-required="menuProperty.value === 'selected'">
              <li ng-repeat="menu in menus" class="divider" role="menuitem" ng-click="setmenu(menu.name)"><a href="">{{menu.name}}</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

            

         

dropdown table

I have table with 5 columns which spans a large-8 column row in Foundation. The last < td > contains a clickable icon which when clicked, it shows a dropdown. Unfortunately, when the dropdown is displayed, it goes beyond the right part of the browser. See screenshot - http://i.imgur.com/3DwkJyp.png

I noticed that the dropdown when displayed, is aligned to the left side of the last < td >. See screenshot using chrome dev tools - http://i.imgur.com/wUp6KWL.png

I would like the dropdown appear right aligned of that since it's the last column.

And this is what I want to achieve - http://i.imgur.com/r2u8DI0.png

Here is the current code that I have

    <table>
      <thead>
        <tr>
          <th>Field 1</th>
          <th>Field 2</th>
          <th>Field 3</th>
          <th>Field 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>value 1</td>
          <td>value 2</td>
          <td>value 3</td>
          <td>value 4</td>
          <td dropdown-toggle="#menu" class="text-right form-control"> <i class="fi-list small"></i>
            <div class="floatright">
              <ul id="menu" ng-model="menuProperty" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="true" ng-required="menuProperty.value === 'selected'">
              <li ng-repeat="menu in menus" class="divider" role="menuitem" ng-click="setmenu(menu.name)"><a href="">{{menu.name}}</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

            

         

This post has been closed. No new replies can be added.

Onie Camara over 4 years ago

I got it working by setting position absolute, right: 0 and top: 0 and the parent to position relative :)