locked
Problem to js code RRS feed

  • Question

  • User364663285 posted

    Hi,
    How to adjust js code to make it smaller below (it is too big)?

    https://1drv.ms/u/s!Ai8CrEskdewXm0Vww96R2cnrk-Nc

    code is

    function ShowMessage(msg0) {
        $.alert({
            title: '信息',
            useBootstrap: false,
            content: msg0,
            buttons: {
                OK: {
                    text: 'OK',
                    btnClass: 'btn-green',
                    keys: ['enter'],
                    action: function () {
                        //$.alert('You clicked OK!');
                    }
                }
            }
        });
        return false;
    };
    

    Friday, November 2, 2018 7:15 AM

All replies

  • User-474980206 posted
    It would help to know which JavaScript library you are using. First check the docs, for a size / width option. If not use the browsers debugger to see the generated markup. You should be able to see the div you neeed to set the width on.
    Friday, November 2, 2018 3:53 PM
  • User839733648 posted

    Hi wmec,

    According to your description and code, it seems that you've used jquery-confirm.

    If you want to change the size of alert box, you could add  boxWidth: 'your expected size'.

    I've made a test and maybe you could refer to:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" />
        <script>
            $(function () {
                $("#btnMsg").click(function () {
                    ShowMessage("TestInfo");
                })
                function ShowMessage(msg0) {
                    $.alert({
                        boxWidth: '300px',
                        title: '信息',
                        useBootstrap: false,
                        content: msg0,
                        buttons: {
                            OK: {
                                text: 'OK',
                                btnClass: 'btn-green',
                                keys: ['enter'],
                                action: function () {
                                    //$.alert('You clicked OK!');
                                }
                            }
                        }
                    });
                    return false;
                };
            })
        </script>
    </head>
    <body>
        <button id="btnMsg">TestMsg</button>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Monday, November 5, 2018 4:16 AM
  • User364663285 posted

    I have codes

    function ShowMessage(msg0) {
        $.alert({
            boxWidth: '160px',
            title: '信息',
            useBootstrap: false,
            content: msg0,
            buttons: {
                OK: {
                    text: 'OK',
                    btnClass: 'btn-green',
                    keys: ['enter'],
                    action: function () {
                        //$.alert('You clicked OK!');
                    }
                }
            }
        });
        return false;
    };
    

    but it was still not adjusted (if you press Save button) below

    http://www.SearchHouseLive.com/RegRec2?id=18&user_abbr=mc2&readonly=n

    Monday, November 5, 2018 5:23 AM
  • User839733648 posted

    Hi wmec,

    I've used F12 developer tools to check the class, and I suggest that you could add a CSS style as below.

        <style>
            .jconfirm-box .jconfirm-hilight-shake .jconfirm-type-default .jconfirm-type-animated{
                width:20%;//or width:150px
            }
        </style>

    the effect.

    Best Regards,

    Jenifer

    Monday, November 5, 2018 6:10 AM