CSS options menu

Question

CSS options menu

Navigation

#1 by (1 votes)

2

Good morning, I need to create a menu in the right corner like the example, but I'm not able to ...

When you click on my button you need to open the menu on top of the button without leaving the screen

I need it to look like this:

followsthestructureofthelocationcontainingthebutton:

<divclass="panel-body form-group">
    <div>
        <div class="list-group margem_bottom_list_group" style="text-align:left">
            <table class="table">
                <thead>
                    <tr>
                        <th style="padding:1px">Parcela</th>
                        <th style="padding:1px">Venc.</th>
                        <th style="padding:1px">Valor</th>
                        <th style="padding:1px">Tipo</th>
                        <th style="padding:1px; text-align:right">Opções</th>
                    </tr>
                </thead>
                <tbody ng-repeat="item in receberPesq.List">
                    <th style="display: table-cell;vertical-align: middle;">{{item.parcela}}</th>
                    <th style="display: table-cell;vertical-align: middle;">{{item.dtVenc}}</th>
                    <th style="display: table-cell;vertical-align: middle; text-align:center;">{{item.valor}}</th>
                    <th style="text-align:center;font-weight: bold;display: table-cell;vertical-align: middle;" ng-class="item.tipo == 'C'?'credito':'debito'">{{item.tipo}}</th>
                    <!-- botão que chama o menu -->
                    <th style="padding:1px; text-align:right"><button type="button" ng-click="pesquisar(receber)" title="Conta" class="btn btn-default btn-fab btn-raised button_obs fa fa-ellipsis-v"></button></th>
                </tbody>
            </table>
        </div>
    </div>
</div>

EDIT: I would like to place this menu on top of the button when clicking on it: link

javascript html angularjs css ionic

asked by anonymous 30.10.2017 / 14:18

1 answer

Receiving Token via WebRequest? How to remove from Git a file that was crawled and is now in .gitignore?

score 1 · Accepted Answer

You can make these elements with a sublist, this way you will easily meet the goal using a bit of the bootstrap, it should look like this:

    <tbody ng-repeat="item in receberPesq.List">
             <th style="display: table-cell;vertical-align: middle;">{{item.parcela}}</th>
             <th style="display: table-cell;vertical-align: middle;">{{item.dtVenc}}</th>
             <th style="display: table-cell;vertical-align: middle; text-align:center;">{{item.valor}}</th>
             <th style="text-align:center;font-weight: bold;display: table-cell;vertical-align: middle;" ng-class="item.tipo == 'C'?'credito':'debito'">{{item.tipo}}</th>
             <th style="padding:1px; text-align:right; width: 10px;">
                 <ul class="nav " style="list-style-type: none;">
                      <li>
                         <a data-toggle="dropdown" style="background-color: #FFFFFF;"><button type="button"  title="Conta" class="btn btn-default btn-fab btn-raised button_obs fa fa-ellipsis-v"></button> </a>
                           <ul class="dropdown-menu">
                              <li style= "font-size: 15px"><a>Pré Baixa</a></li>
                              <li style= "font-size: 15px"><a>Detalhes</a></li>
                              <li style= "font-size: 15px" ng-show="item.Id_Pedido > 0"><a>Pedido</a></li>
                            </ul>
                     </li>
                 </ul>
             </th>
   </tbody>