Bootstrap 4 classes

[georgeemr]

Should be great to use the bootstrap 4 default modal classes so they can match the design

[larsk2009]

Can you explain a little more what you mean by this? Maybe you can give an example of the change you would like?

[georgeemr]

Sure, it's because my design conflicts with the overlay of the component because the original overlay element is inserted outside the modal code and in this case is inserted inside the modal code container and this is causing the overlay not to overlay my menu.

For example:

If I put the overlay outside of the blazored-modal-container element like the original bootstrap 4 modal it works.

I'm trying to implement the custom layout to use the standard bootstrap 4 modal but I'm unable to successfully do it.

[georgeemr]

As I understand from the custom bootstrap modal example, I need to replace all my code with that component and I think I will need to send a custom parameter to set what component i'm loading inside that component. Is this correct?

[chrissainty]

@georgeemr That sounds about right. I would try and encapsulate all of the Bootstrap markup in a component and then you can just declare that on each component to be displayed instead of having a huge if else statement as you add more and more components to be displayed.

[georgeemr]

Thanks a lot, @chrissainty . I appreciate your effort. At the moment I finally end with this implementation:

If think this implementation can end with something like:

var modalOptions = new ModalOptions();
modalOptions.BootstrapLayout = true;
modalOptions.SizeClass = "modal-fullscreen";
var modalParameters = new ModalParameters();
modalParameters.Add("Item",value);
Modal.Show<MyOriginalComponent>("My title", modalParameters, modalOptions);

I'm implementing custom size for the modal because in some cases I need to use the modal-lg and modal-sm. And I have a custom full-screen modal class too.

Thanks a lot for following the issue.

[hhyyrylainen]

I'm working on a blazor WASM app that I setup from the official sample project, which comes with bootstrap 4, so it'd be nice if there was an easy way for this modal system to use the bootstrap modal styling. https://getbootstrap.com/docs/4.4/components/modal/

[chrissainty]

We have an example of how to do this in the sample projects.

[hhyyrylainen]

I saw that example, but when I do the exact code shown by that page, the layout just breaks entirely. So how do I setup it to use the bootstrap style correctly? It seems that the modal content just gets dumped without a container to the start of the app div.

[hhyyrylainen]

Okay so I got this working, but I had to inspect the example closely, because the instructions are very incomplete. So in addition to specifying the UseCustomLayout property, you need to make all of your modals based on this code: https://github.com/Blazored/Modal/blob/main/samples/BlazorWebAssembly/Shared/CustomBootstrapModal.razor which I wrapped into a new component so I don't have to copy paste all the bootstrap stuff for each modal type. Which results in almost perfect modal actions, it just seems to hide the side top bar and left navigation bar gets pushed up.

Edit: that last point only happens when I have scrolled the page slightly down, everything is fine if the scroll is at the top. So it seems that the sticky property on the left sidebar and the top bar don't work with the bootstrap modal style for some reason. One more update: it seems that the same problem also happens with the default modal style, so this is not exclusive to the bootstrap style. Here's what the left bar looks like when I have a modal open: and here it is without doing anything else than closing the open modal:

[chrissainty]

What am I looking for in the images you've posted @hhyyrylainen? Sorry, I can't spot what you're referring to.

[hhyyrylainen]

Compare the bottoms of the images. When the modal is open, the left sidebar box is pushed up leaving some white space visible underneath it. And also the top is cutoff, even though the sidebar uses the css sticky style.

Edit: this doesn't happen on the example site you linked to because none of the pages have enough content to have a scrollbar with the left side bar still fitting entirely on screen.

[chrissainty]

Ah, ok I see. @larsk2009 you got any ideas on this one?

[larsk2009]

I don't seem to be able to reproduce this, but that is probably just me. @hhyyrylainen can you provide a repo which reproduces this issue? That is the easiest way for us to see the issue and fix it.

[hhyyrylainen]

@larsk2009 yes, I'm working on this branch in this repo: https://github.com/Revolutionary-Games/ThriveDevCenter/tree/blazor

Edit: sorry, it's not a very minimal example, and the instructions for running aren't that great, it's under heavy development. I can try to whip up a better reproduction case for the problem (and probably open a new issue as this isn't really related to this issue anymore).

[larsk2009]

Thanks. Which project should I run to see the issue you are having?

[hhyyrylainen]

Yeah, that's a bit complicated. There's no way to currently run it in a minimal sense (see my update to my comment above). But basically running the Server project (once everything is configured) with dotnet watch is what runs the app. And even then you'd need to follow the instructions to create an account in the app and create some stuff before being able to see the problem.

[larsk2009]

Yeah I think it might be better if you create a new issue and make a reproduction that is easy to run, then I would be happy to help you!

[larsk2009]

As I think the original issue by @georgeemr has been solved, I will close this issue. If it hasn't, please re-open it!.

[hhyyrylainen]

@larsk2009 opened a new issue: https://github.com/Blazored/Modal/issues/306 BTW this issue was about using the bootstrap classes, which didn't get solved by my latest comments. I'd still like to see a builtin option to enable bootstrap style for the modals / documentation on how to do that without writing a bunch of duplicated code.

[larsk2009]

@chrissainty something in my head about talking about the thing mentioned by @hhyyrylainen before, but I can't find the issue. What is your opinion about it?

[chrissainty]

@hhyyrylainen We won't be able to use Bootstrap classes with the modal as that would also require the same structured HTML and we can't guarantee that. The best we can do is provide our own implementation of the Bootstrap styles. This is what larger component vendors such as Telerik do. However, right now I don't have the capacity for this, so if this is something you'd like, we'd be happy to accept a PR. Otherwise this will be added in when there is some capacity. Sorry I can't give a better timeframe right now.

[hhyyrylainen]

@chrissainty I got things working on my app by doing the following:

• UseCustomLayout = true
• Created a new helper component that does the bootstrap style: https://github.com/Revolutionary-Games/ThriveDevCenter/blob/5c8c148832a5f7399ca7c346fb440a3675a4f54e/Client/Shared/BootstrapModal.razor#L1
• And then do my modal components by using that helper component as the wrapper: https://github.com/Revolutionary-Games/ThriveDevCenter/blob/fbbaee74bd969ab7b4285ffdb3dcce991f3df378/Client/Shared/ConfirmDelete.razor#L1

So the bootstrap style is now working for me, but for future users it would be much more user friendly if:

• That bootstrap helper component was contained in this library (instead of just being in the examples, as that's where I found out that I need to do this)
• There was documentation on how to use the bootstrap helper component, as right now the example site / tutorial says that UseCustomLayout is required. It doesn't go into more details. So the example is pretty useless at giving people info on how it actually needs to be done so that it works.