Alter size based on content

[nikku]

Alter size based on content

[nikku]

Do you think this is desirable? I would suggest to use a normal webpage to display extra large content, e.g. tables.

[syphernl]

Well, maybe make it optional or add a max-width to it.

In my case I had to widen the default modals because they were not wide enough for a simple form element row: "{label} {input field} {fairly long suffix that was too wide by default}".

I believe Facebox does the same thing. I was using this prior to finding this library (after spending 1-2h on making it work with Bootstrap :-))

[nikku]

Well, it is rather easy to change that, maybe consider to do it on your own. Override the boostrap styles for .modal which are

.modal {
    ...
    width: 560px;
    top: 50%;
    margin: -250px 0 0 -250px;
}

with your new styles for wide dialogs

.wide-modal {
    ...
    top: 20%;
    width: 800px;
    margin: 0 0 0 -400px; /* -1 * (width / 2) */ 
}

[syphernl]

But how would you determine which modals are normal, and which are wide? That probably involves an additional class next to open-modal, doesn't it?

[nikku]

Could you tell me, what your precise use case is for the wide dialog is? How do you want it to be configurable?

The above example can be applied by giving a modal dialogs parent the new class name, e.g. by executing $(".selector").parent().addClass("wide-modal").

[syphernl]

In some cases, my forms are too wide to fit in the default modals, so in those cases I'd like to be able to override that per modal.

[syphernl]

Your code sample works as a charm.
There is no need to change the margins though, atleast not in my case.

You might want to add this to the documentation.

[andreslucena]

+1 to adding this to the documentation, it's a nice trick :)

[nikku]

Added to docs ;-)