Closed cherron4113 closed 3 years ago
I'm trying your code snipped and it works for me. Can you check your site.css
. Maybe you have some style interfering with dropdown. Also make sure you don't have any duplicate bootstrap.css
in your index.html or _Host.cshtml. And lastly check that you have all these set https://blazorise.com/docs/start/#2-source-files
I removed the site.css and that did not change anything. here is my index file. and import.razor. I do not see anything glaring. it did work in the blazorise demo prior to updating, but I redownloaded it again and it will not restore the webessembly 3.1 and does not work on webassembly 3.2
the bootstrap css I'm using is twitter-bootstrap@4.5.0
"libraries": [ { "library": "twitter-bootstrap@4.5.0", "files": [ "css/bootstrap.min.css", "css/bootstrap.min.css.map", "js/bootstrap.min.js", "js/bootstrap.min.js.map" ] },
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>DxWebAdmin</title>
<base href="/" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/all.min.css">
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
- <link href="_content/Blazorise.Material/blazorise.material.css" rel="stylesheet" />
<link href="_content/Blazorise.Sidebar/blazorise.sidebar.css" rel="stylesheet" />
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="js/wsinterop.js"></script>
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/Chart.js"></script>
<script src="_content/Blazorise.Charts/blazorise.charts.js"></script>
<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
- <script src="_content/Blazorise.Material/blazorise.material.js"></script>
- <script src="_content/BlazorInputFile/inputfile.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
You have material along with bootstrap files, try removing those. Also Blazorise have FileEdit
component instead if BlazorInputFile
, so try it instead.
Thank you I followed your advice and it exposed an error in popper.js - I was using the bootstrap.min.js with the popper from cdnjs - I tried all the versions 1.0 and 2.0 version with the same error. the solution was to remover popper.js from my libman and index.html and change the bootstrap.min.js ==> bootstrap.bundle.js, which includes popper.js.
a co-worker found the solution here
https://getbootstrap.com/docs/4.0/getting-started/contents/#js-files
The first time I click on the Actions toggle I see the menu as expected and I can click on an item. The second time I click on the Actions toggle no menu displays. I have also tried this with no Clicked event with the same behavior. I also tried to use DropDownList instead of the menu. again it will display because it does not hide but after the first click I can no longer click on any item in the list - at least a click event isn't triggered. below is thee code I am trying to get working. I copied the example page from the Blazorise example buttons page with the same behavior. I am running vs 16.6.4 a jpg of the packages installed is attached. I only just today updated to the preview packages to see if that would fix the error.