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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
Magdalena Dembna staff premium commented 5 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 5 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.