search

dotnet-presentations / ContosoCrafts

MIT License
324 stars 596 forks source link

Got the problem about "popup" window #19

Open liulian1004 opened 2 years ago

liulian1004 commented 2 years ago

Hi, I follow the tutorial and blocking on the popup window step. I completely copy the code of ProductList.razor to avoid any typos and still can't pop up the window when click "More Info". I have switched different browser, and make sure the browser did not block the popup window. And of course there is no error message. Furthermore, my main layout is different as the tutorials'. On my side, the main page only display one line with one product. I don't have serval products displayed in one line as showed in the YouTube. I am bit of doubt about bootstrap version problem? I use 5.1.3.

Let me know, thanks.

gabrielpereira3 commented 2 years ago

About the popup problem, you will have to make 3 changes:

Replace the data-toggle, data-target and data-dismiss to data-bs-toggle, data-bs-target and data-bs-dismiss

So, these lines <button @onclick="(e => SelectProduct(product.Id))" data-toggle="modal" data-target="#productModal" class="btn btn-primary">More Info</button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>

will be like that <button @onclick="(e => SelectProduct(product.Id))" data-bs-toggle="modal" data-bs-target="#productModal" class="btn btn-primary">More Info</button> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>

And about the one line product issue:

Try replacing the line <div class="card-columns"> to <div class="card-columns row row-cols-3 row-cols-md-3 row-cols-sm-2 g-4"> It worked for me, my page was displaying one line with only one product too.

l122 commented 1 year ago

@liulian1004, thank you for bringing up this issue, because I had exactly the same one. @gabrielpereira3, thank you for the solution and saving me a ton of time ;)