Posicionar un botón flotante

publicado por: Anonymous

Estoy trabajando con ASP.NET MVC 5, Materialize tengo un botón flotante el cual necesito que se vea en la parte superior derecha de la vista pero me aparece en la parte inferior derecha.

Estoy trabajando con materialize Horizontal FAB Horizontal FAB

introducir la descripción de la imagen aquí

Ese botón de lápiz debo ponerlo en la parte de arriba donde indica la flecha amarilla. Este es mi código:

<body>
<div class="fixed-action-btn horizontal">
    <a class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
        <li><a class="btn-floating red"><i class="material-icons">playlist_add</i></a></li>
        <li><a class="btn-floating green"><i class="material-icons">play_for_work</i></a></li>
    </ul>
</div>

<table id="proveedores" class="table table-hover display" >
    <thead style="background-color:#337ab7;border-color:#2e6da4;color:#fff;">
        <tr>
            <td>ProveedorId</td>
            <td>Razón Social</td>
            <td>Número documento</td>
            <td>Dirección</td>
            <td>Teléfono</td>
            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
        </tr>
    </thead>


    <tbody>
        @foreach (var row in ViewBag.ListarProveedor)
        {
            <tr>
                <td>@row.ProveedorId</td>
                <td>@row.RazonSocial</td>
                <td>@row.NumeroDocumento</td>
                <td>@row.Direccion</td>
                <td>@row.Telefono</td>
                <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
            </tr>
        }
    </tbody>  
</table>

solución

El fixed-action-btn está hecho para que siempre esté pegado a la esquina inferior derecha de la página es por eso que tiene la propiedad position: fixed; , si deseas alterar esto puedes envolverlo en otra etiqueta con position: relative; y al botón ponerlo como position: absolute; y esta etiqueta colocarla en donde quieras colocar el botón, por ejemplo:

En el HTML:

    <div class="row">
        <div class="col s12">
            <div class="action-btn-wrapper">
                <div class="fixed-action-btn my-custom-btn horizontal">
                    <a class="btn-floating btn-large red">
                        <i class="large material-icons">mode_edit</i>
                    </a>
                    <ul>
                        <li><a class="btn-floating red"><i class="material-icons">playlist_add</i></a></li>
                        <li><a class="btn-floating green"><i class="material-icons">play_for_work</i></a></li>
                    </ul>
                </div>
            </div>
            <h1>Proveedor</h1>
        </div>
    </div>

y en tu CSS:

.action-btn-wrapper {
    position: relative;
}

.fixed-action-btn.my-custom-btn {
    position: absolute;
    right: 0px;
    top: 23px;
    padding-top: 15px;
    margin-bottom: 0;
}

OJO: en la clase de tu botón fixed-action-btn le añado la clase my-custom-btn para no alterar el estilo del botón original.

Te dejo la liga de un CodePen para que lo veas aquí.

Update:

Si quieres modificar aún más el posicionamiento del botón puedes modificar los valores del top y right para que quede exactamente donde tu quieres. Un buen recurso para entender el posicionamiento de los elementos es la página de W3C aunque un curso general de CSS te ayudaría muy bien a entenderlo. Ej. CodeAcademy. Saludos!

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *