locked
Font Size of Jquery Dialog RRS feed

  • Question

  • User-1499457942 posted

    Hi

      Can we change Font Size/Color of Jquery Dialog Title only.

    Thanks

    Monday, June 25, 2018 6:24 AM

All replies

  • User-369506445 posted

    hi

    yes, you can do it, for example, you can define a CSS class below like :

    <style>
            .ui-dialog > .ui-widget-header {
                background: red;
                font-size: 26px;
            }
        </style>

    Demo

    and your complete code 

    <!DOCTYPE html>
    <html runat="server" xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function() {
                $( "#dialog" ).dialog();
            });
    
        </script>
        
        <style>
            .ui-dialog > .ui-widget-header {
                background: red;
                font-size: 26px;
            }
        </style>
    </head>
    <body runat="server">
        <div id="dialog" title="Basic dialog">
            <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
        </div>
    </body>
    </html>

    Monday, June 25, 2018 6:36 AM
  • User36583972 posted


    Hi JagjitSingh,

    Can we change Font Size/Color of Jquery Dialog Title only.

    vahid has given you a solution.

    You can try to use the F12 developer tool and look at the style definition of the title element, then change it by yourself.

    Best Regards,

    Yong Lu

    Tuesday, June 26, 2018 3:08 AM