search

wenzhixin / bootstrap-table

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
https://bootstrap-table.com/
MIT License
11.72k stars 4.44k forks source link

Add extra classname to modals #5335

Open snoopy72 opened 3 years ago

snoopy72 commented 3 years ago

Description

Trying to use your plugin "MultiSort", the plugin opens a modal after clicking on the button.

Unfortunately the modal is written at the end of the document and is only using the class "modal". That class is used heavily by other (foreign) components and plugins, so the layout is more or less uncontrolable:

The close button is not reachable, the width is cut etc.: ms1

Currently, the generated modal from your BT plugin looks like this:

<div class="modal fade in" id="sortModal_tbl-main" ...

We could use the css method [id^="sortModal_"] { ... }, but that would neither matches our rules nor be easy to maintain.

If you would add an extra class (f.eg. "bootstraptable" it would be much easier to define own CSS rules:

<div class="bootstraptable modal fade in" id="sortModal_tbl-main" ...

It would be perfect, if the developer could define those optional prefix/addition by option (f.eg. "multiSortModalClass").

multiSortModalClass: "bootstraptable",
UtechtDustin commented 3 years ago

I think we should not add an additional class for that, its quite easy with the [id^="sortModal_"], but it could maybe make sense to allow the user to overwrite the html.

@wenzhixin @djhvscf What do you think ?

djhvscf commented 3 years ago

I think the our plugin should be very customizable.. So it's good to me to add a new option to the multisort extension in order to add a class to the modal.

snoopy72 commented 3 years ago

@DustinUtecht Why ? Several automation tools cannot handle "complex" definitions like [id^="sortModal_"] When we start to open our CSS for "special" styles like that, we will lose control. In our css files we define only classes, which allows us to highly automate our processes.

@djhvscf I agree you: mote flexible and customizable components are better to implement and use for more developers.

UtechtDustin commented 3 years ago

@snoopy72 I understand you point, but i think it makes more sense to allow the user to customize the html (which includes the classes) then adding a options which changes only one part of the html. We have more then 1 extension, which means we must add X options to add X classes, in my opinion it makes more sense to allow overwrite the html. @djhvscf

wenzhixin commented 3 years ago

I think we can add an option like modalTemplate to support custom the HTML template.