Floating buttons appear under the footer

[joseluisvl]

When I place a floating button with this code in a page with a footer, the image of the button appears under the footer.

<a href="#" class="ui-btn ui-btn-inline ui-btn-fab ui-btn-fab-bottom ui-btn-raised clr-primary"> <i class='zmdi zmdi-search zmd-2x'></i> </a> Is there a way to position the button over the footer, no mater the button size?.

Thanks.

Regards, Jose.

[well-it-wasnt-me]

make an override using css, use !important

[redfast00]

@pazDontExist: could you please be a bit more specific? How would you make it so it floats above the footer?

[ghost]

You need to place the floating button inside your main container. If you are using nativedroid2 with jQuery mobile below is the code example you may use -

    <!-- message page -->
<div data-role="page" id="messages-page">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>Messages</h1>
    </div> <!-- /header-->
    <div data-role="content">
        <ul id="listMessage" data-role="listview" data-icon="false" class="ui-listview" data-inset="true">
            <li class="ui-li-has-thumb">
                <a href="#" class="ui-btn waves-effect waves-button waves-effect waves-button">
                    <h2>Amit Anmol</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </a>
            </li>
            <li class="ui-li-has-thumb">
                <a href="#" class="ui-btn waves-effect waves-button waves-effect waves-button">
                    <h2>Amit Anmol</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </a>
            </li>
        </ul>

        <!-- floating button -->
        <a id="btn-compmsg" href="#compose-msg-page" class="ui-btn-fab ui-btn-raised clr-warning ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button" data-transition="flow">
            <i class='zmdi zmdi-plus zmd-2x'></i>
        </a>
    </div> <!-- /content -->
</div><!-- /message page -->

And the output of this code is

https://i.stack.imgur.com/H0687.png

[joseluisvl]

The real problem is when you have the floating button and you have a footer after it. The footer position is placed over the floating button.

        <div data-role="content">
...
            <a id="searchExchangeResultsViewButton" href="#searchExchangeResultsView" class="ui-btn
                            ui-btn-inline
                            ui-btn-fab
                            ui-btn-fab-bottom
                            ui-btn-raised
                            clr-primary">
                <i class='zmdi zmdi-search zmd-2x'></i>
            </a>
        </div>
        <div data-position="fixed" data-tap-toggle="false" data-role="footer" data-tap-toggle="false">
            <div data-role="navbar">
                <ul>
                    <li><a href="#exchangesView"><i class='blIcon fa fa-exchange'></i><span data-i18n="nav.exchanges">Intercambios</span></a></li>
                    <li><a href="#mycollectionsView"><i class='blIcon fa fa-image'></i><span data-i18n="nav.mycollections">Mis Colecciones</span></a></li>
                </ul>
            </div>
        </div>