Split button drop down not working


Topic: Split button drop down not working

Hi, in my vanilla test harness the split button dropdown does not drop down its menu.

The test harness includes the required CSS imports:import 'bootstrap-css-only/css/bootstrap.min.css';import 'mdbvue/build/css/mdb.css';in the correct places in main.js.

I got the dropdown to work after adding bootstrap via the CDN to the index.html. This is what I added:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Unfortunately adding the bootstrap css made a mess of other styling.

Could you please advise what I'm missing from the standard MDB setup that would be causing the dropdown to not work.

Thank you.


Magdalena Dembna staff premium commented 3 years ago

It would be very helpful if you were to include screenshots of the console. What message did you get at first? My guess, with MDB Vue dropdowns, bootstrap and jQ that bootstrap tries to initialize its dropdown and it goes into a conflict with MDB Vue code - but without an error message it's just a guess. Kind regards, Magdalena


phopkins@atomsoftware.com.au commented 3 years ago

Hi Magdalena, sorry my mistake... I just found that I was looking in the jQuery area and used a split button example from there. The MDB Vue library doesn't have split buttons... I'll make one.

Thank you.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.3
  • Device: Desktop PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No