Topic: Floating Action btn not visible in mobile view

Ashok Kumar pro asked 6 years ago


Floating action button is not visible in Mobile view or Table view. Below is my html. It works in > 1024px.   <!-- Fixed button --> <div class="fixed-action-btn clearfix d-none d-xl-block" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-md purple darken-4"> <i class="fa fa-ellipsis-v"></i> </a> <ul class="list-unstyled"> <li><a class="btn-floating blue" data-toggle="tooltip" data-placement="left" title="Insights" onclick="window.location.href='insights.html'"><i class="fa fa-chart-line"></i></a></li> <li><a class="btn-floating green" data-toggle="tooltip" data-placement="left" title="Budgets" onclick="window.location.href='budget.html'"><i class="fa fa-piggy-bank"></i></a></li> <li><a class="btn-floating yellow darken-1" data-toggle="tooltip" data-placement="left" title="Transactions" onclick="window.location.href='transactions.html'"><i class="fa fa-exchange-alt"></i></a></li> <li><a class="btn-floating red" data-toggle="tooltip" data-placement="left" title="Accounts" onclick="window.location.href='accounts.html'"><i class="fa fa-suitcase"></i></a></li> </ul> </div> <!-- Fixed button -->

Ashok Kumar Sundaramurthy free commented 6 years ago

Kindly revert on this..

Bartłomiej Malanowski staff commented 6 years ago

Did you try to upgrade your version to 4.5.1? Do you have any custom code?

Ashok Kumar pro commented 6 years ago

Hi Malanowski, I do not have any custom code. Can you help me download 4.5.1? I couldn't locate the download link in 'My account' page.

Bartłomiej Malanowski staff commented 6 years ago

please contact me at b.malanowski@mdbootstrap.com

Ashok Kumar pro commented 6 years ago

I have emailled two days back. Pl check and revert asap.

Bartłomiej Malanowski staff commented 6 years ago

I'm sorry, but I didn't receive your email. Could you please check it?

Ashok Kumar pro commented 6 years ago

Hi Malanowski, I have resent the email. Pls, check.

Bartłomiej Malanowski staff commented 6 years ago

The answer is on your e-mail ;)

Adam Stapleton pro answered 6 years ago


It looks like you've told it to hide it on a small screen size, try changing

<div class=”fixed-action-btn clearfix d-none d-xl-block” style=”bottom: 45px; right: 24px;”>

to

<div class=”fixed-action-btn clearfix d-block” style=”bottom: 45px; right: 24px;”>

All that's changed is I have removed "d-none d-xl-block" and added "d-block"



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags