Unable to attach onclick event on floating buttons


Topic: Unable to attach onclick event on floating buttons

sujata pro asked 6 years ago

I have used the following code but could not use the floating buttons. Tried attaching events using JS as well as using onclick function on the elements and even use the modal, nothing seems to be working, also tried with a JS patch as suggested in your forum. Please suggest a solution soon. HTML CODE: <!-- Fixed button --> <div class="fixed-action-btn" style="bottom: 100px; right: 24px;"> <a class="btn-floating btn-lg red"> <i class="fa fa-pencil"></i> </a> <ul class="list-unstyled"> <li><a class="btn-floating red"><i class="fa fa-star"></i></a></li> <li><a class="btn-floating yellow darken-1" id="UserAccount_AddUserLink" onclick="showNewUserForm()" ><i class="fa fa-user"></i></a></li> <li><a class="btn-floating green" data-toggle="modal" data-target="#exampleModalPreview"><i class="fa fa-envelope"></i></a></li> <li><a class="btn-floating blue"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> <!-- Fixed button --> JS CODE: <script> $(document).ready(function() { $('.fixed-action-btn').unbind('click'); }); </script>

Mikołaj Smoleński staff answered 6 years ago

Hi there, Please wrap li elements by a tag, like this:  
<a class="btn-floating yellow darken-1" href="#" id="UserAccount_AddUserLink" onclick="showNewUserForm()" ><li><i class="fa fa-user"></i></li></a>
  Best Regards

Richard7424 pro commented 6 years ago

While this works, can you please provide the necessary style sheet additions to make this a full workaround?

Mikołaj Smoleński staff answered 6 years ago

This should fix Your issue:
.fixed-action-btn ul a {
 margin-left: 15px;
}
.fixed-action-btn ul li {
 justify-content: center;
}
Best Regards

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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No