jQWidgets Forums

jQuery UI Widgets › Forums › Editors › Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader › jqxScrollbar in textarea

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 10 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    jqxScrollbar in textarea Posts
  • January 7, 2015 at 3:08 pm jqxScrollbar in textarea #65079

    detberlin
    Participant

    Hello people,

    is it possible to use the jqxScrollbar in a textarea?
    the original scrollbar of textarea is too narrow to me.

    If it is possible to use the jqxScrollbar?
    How do I build them up.

    Best regards
    detberlin

    January 8, 2015 at 7:12 am jqxScrollbar in textarea #65108

    Nadezhda
    Participant

    Hello detberlin,

    You can use jqxEditor which is textarea. If you want to change scrollbar size (i.e width, height), please, look at jqxScrollbar API Documentation.
    Here is an example with jqxEditor and default scrollbar size. 

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#editor').jqxEditor({
                height: "200px",
                width: '500px',
                tools: ''
            });
        });
    </script>
    <textarea id="editor">
        <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element. 
        <br />
        <br />
        Features include:
        <br />
        <ul>
            <li>Text formatting</li>
            <li>Text alignment</li>
            <li>Hyperlink dialog</li>
            <li>Image dialog</li>
            <li>Bulleted list</li>
            <li>Numbered list</li>
        </ul>
    </textarea>
</body>
</html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    January 8, 2015 at 2:35 pm jqxScrollbar in textarea #65144

    detberlin
    Participant

    Hello Nadezhda,

    First, thank you for the quick reply.

    I want to use the editor, not because this is not modifiable by the style and he emits also no plain text so no HTML code

    Greet with best
    detberlin

    January 9, 2015 at 7:05 am jqxScrollbar in textarea #65160

    Nadezhda
    Participant

    Hi detberlin,

    Here is an example with jqxPanels and <textarea>. I hope it would be helpful. 

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <style>
        textarea {
            width: 450px;
            height: 450px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxPanel
            $("#jqxpanel").jqxPanel({ width: 450, height: 450 });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxpanel' style="font-size: 13px; font-family: Verdana; float: left;">
        <textarea style="overflow:hidden">  
        </textarea>
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.