Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add extra classname to modals

See original GitHub issue

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",

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

wenzhixincommented, Sep 26, 2020

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

0reactions

UtechtDustincommented, Sep 25, 2020

@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

Top Results From Across the Web

Add additional class to bootstrap modal in react - Stack Overflow

I used ' dialogClassName="planModal" ' property to add class to the container but it adds class to some internal div. reactjs · bootstrap-4 ......

Classes - react-modal documentation

You can use the className and overlayClassName props to control the CSS classes that are applied to the modal content and the overlay,...

Modal classname to be added to ReactModalPortal div so we ...

Steps to reproduce: Add a css module style <Modal className={styles. modal}> Notice the style is being added to the ReactModal__Content div and ...

<Modal/> Component - React-Bootstrap

Add dialogs to your site for lightboxes, user notifications, ... className="modal show" ... A modal with header, body, and set of actions in...

Modal - React Suite

backdropClassName, string, Add an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in".