locked
How to grow or shrink bootstrap modal dialog size as per html content RRS feed

All replies

  • User-1142886626 posted

    Hi sudip_inn,

    If you used plugin bootstrap3-dialog and want to resize dialog size.

    Code below is for your reference:

             BootstrapDialog.show({
                    title: 'More dialog sizes',
                    message: 'Hi Apple!',
                    buttons: [{
                        label: 'Normal',
                        action: function (dialog) {
                            dialog.setTitle('Normal');
                            dialog.setSize(BootstrapDialog.SIZE_NORMAL);
                        }
                    }, {
                        label: 'Small',
                        action: function (dialog) {
                            dialog.setTitle('Small');
                            dialog.setSize(BootstrapDialog.SIZE_SMALL);
                        }
                    }, {
                        label: 'Wide',
                        action: function (dialog) {
                            dialog.setTitle('Wide');
                            dialog.setSize(BootstrapDialog.SIZE_WIDE);
                        }
                    }, {
                        label: 'Large',
                        action: function (dialog) {
                            dialog.setTitle('Large');
                            dialog.setSize(BootstrapDialog.SIZE_LARGE);
                        }
                    }]
                });
    

    http://nakupanda.github.io/bootstrap3-dialog/

    Besides, you also could use css achieve this.

    Such as:

    <style type="text/css">
           .myModal {
             border: 2px solid;
             padding: 20px;
             width: 300px;
             resize: both;
             overflow: auto;
        }
        </style>
    

    Best Regards,

    Ailleen

    Sunday, August 28, 2016 9:00 AM
  • User264732274 posted

    just do not understand your code

    BootstrapDialog.show({
                    title: 'More dialog sizes',
                    message: 'Hi Apple!',
                    buttons: [{
                        label: 'Normal',
                        action: function (dialog) {
                            dialog.setTitle('Normal');
                            dialog.setSize(BootstrapDialog.SIZE_NORMAL);
                        }
                    }, {
                        label: 'Small',
                        action: function (dialog) {
                            dialog.setTitle('Small');
                            dialog.setSize(BootstrapDialog.SIZE_SMALL);
                        }
                    }, {
                        label: 'Wide',
                        action: function (dialog) {
                            dialog.setTitle('Wide');
                            dialog.setSize(BootstrapDialog.SIZE_WIDE);
                        }
                    }, {
                        label: 'Large',
                        action: function (dialog) {
                            dialog.setTitle('Large');
                            dialog.setSize(BootstrapDialog.SIZE_LARGE);
                        }
                    }]
                });

    can u give me working version of your code?

    Monday, August 29, 2016 8:44 AM
  • User-1142886626 posted

    Hi sudip_inn,

    This example used the plugin bootstrap3-dialog.

    You can refer the link for more information:

    https://github.com/nakupanda/bootstrap3-dialog

    file:///C:/Users/v-ninz/Downloads/bootstrap3-dialog-master/bootstrap3-dialog-master/examples/index.html

    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
                $(function () {
                    BootstrapDialog.show({
                        title: 'More dialog sizes',
                        message: 'Hi Apple!',
                        buttons: [{
                            label: 'Normal',
                            action: function (dialog) {
                                dialog.setTitle('Normal');
                                dialog.setSize(BootstrapDialog.SIZE_NORMAL);
                            }
                        }, {
                            label: 'Small',
                            action: function (dialog) {
                                dialog.setTitle('Small');
                                dialog.setSize(BootstrapDialog.SIZE_SMALL);
                            }
                        }, {
                            label: 'Wide',
                            action: function (dialog) {
                                dialog.setTitle('Wide');
                                dialog.setSize(BootstrapDialog.SIZE_WIDE);
                            }
                        }, {
                            label: 'Large',
                            action: function (dialog) {
                                dialog.setTitle('Large');
                                dialog.setSize(BootstrapDialog.SIZE_LARGE);
                            }
                        }]
                    });
                });
            </script>
    </body>

    Best regards,

    Ailleen

    Monday, August 29, 2016 1:04 PM
  • User264732274 posted

    please see this url http://sandbox.scriptiny.com/tinybox2/ and see the demo then u can understand how i want to show bootstrap dialog. u can understand how i want dialog should grow with bit of animation.

    i will check your script too. thanks

    Monday, August 29, 2016 3:22 PM