jQWidgets Forums

Tagged: jqx-rc-all, jqxPasswordInput, PasswordInput, removeClass, rounded corners

This topic contains 4 replies, has 2 voices, and was last updated by pepe 10 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

remove rounded edge Posts

April 3, 2015 at 8:12 pm remove rounded edge #69553

pepe

Participant

good night, is there any way to remove just straight up and down in the jqxPasswordInput rounded edge ?. Thank You

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>jqxPasswordInput Fluid Size Example. The width of the PasswordInput in this demo is in Percentages.</title>
<link type=”text/css” rel=”Stylesheet” href=”../../jqwidgets/styles/jqx.base.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/jqxpasswordinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#jqxPasswordInput”).jqxPasswordInput({ width: ‘50%’, height: 25, placeHolder: “Enter password:” });
});
</script>
</head>
<body>
<input id=”jqxPasswordInput” type=”password” />
</body>
</html>

April 6, 2015 at 6:17 am remove rounded edge #69573

Nadezhda

Participant

Hello pepe,

You can take out the rounded corners as you remove ‘jqx-rc-all’ class like in the following example. I hope it would be helpful to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxpasswordinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.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/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander.
            $("#createAccount").jqxExpander({  toggleMode: 'none', width: '350px', showArrow: false });
            // Create jqxInput.
            $("#firstName").jqxInput({  width: '300px', height: '20px' });
            $("#lastName").jqxInput({  width: '300px', height: '20px'});
            $("#userName").jqxInput({  width: '300px', height: '20px' });
            // Create jqxPasswordInput.
            $("#password").jqxPasswordInput({  width: '300px', height: '20px', showStrength: true, showStrengthPosition: "right" });
            $("#passwordConfirm").jqxPasswordInput({  width: '300px', height: '20px' });
            // Create jqxDateTimeInpput.
            $("#birthday").jqxDateTimeInput({  width: '300px', height: '20px' });
            // Create jqxDropDownList.
            var genders = ["male", "female"];
            $("#gender").jqxDropDownList({  source: genders, selectedIndex: -1, width: '300px', height: '20px', promptText: "I am...", dropDownHeight: "50px" });
            // Create jqxButton.
            $("#submit").jqxButton({ });
            // Create jqxValidator.
            $("#form").jqxValidator({
                rules: [
                        {
                            input: "#firstName", message: "First name is required!", action: 'keyup, blur', rule: function (input, commit) {
                                return input.val() != "" && input.val() != "First";
                            }
                        },
                        {
                            input: "#lastName", message: "Last name is required!", action: 'keyup, blur', rule: function (input, commit) {
                                return input.val() != "" && input.val() != "Last";
                            }
                        },
                        { input: "#userName", message: "Username is required!", action: 'keyup, blur', rule: 'required' },
                        { input: "#password", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
                        { input: "#passwordConfirm", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
                        {
                            input: "#passwordConfirm", message: "Passwords should match!", action: 'keyup, blur', rule: function (input, commit) {
                                var firstPassword = $("#password").jqxPasswordInput('val');
                                var secondPassword = $("#passwordConfirm").jqxPasswordInput('val');
                                return firstPassword == secondPassword;
                            }
                        },
                        {
                            input: "#gender", message: "Gender is required!", action: 'blur', rule: function (input, commit) {
                                var index = $("#gender").jqxDropDownList('getSelectedIndex');
                                return index != -1;
                            }
                        }
                ],  hintType: "label"
            });
            // Validate the Form.
            $("#submit").click(function () {
                $('#form').jqxValidator('validate');
            });
            // Update the jqxExpander's content if the validation is successful.
            $('#form').on('validationSuccess', function (event) {
                $("#createAccount").jqxExpander('setContent', '<span style="margin: 10px;">Account created.</span>');
            });

            $("#firstName,#lastName,#userName,#password,#passwordConfirm,#birthday,#gender").removeClass("jqx-rc-all");
        });
    </script>
</head>
<body>
    <div id="createAccount" style="font-family: Verdana; font-size: 13px;">
        <div>
            Create a new account
        </div>
        <div style="font-family: Verdana; font-size: 13px;">
            <form id="form" style="overflow: hidden; margin: 10px;" action="./">
                <table>
                    <tr>
                        <td colspan="2">First Name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="firstName" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Last Name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="lastName" />
                        </td>

                    </tr>
                    <tr>
                        <td colspan="2">Choose your username
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input id="userName" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Create a password
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input id="password" type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Confirm your password
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input id="passwordConfirm" type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Birthday
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div id="birthday">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Gender
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div id="gender">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input id="submit" type="button" value="Create account" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

April 6, 2015 at 5:46 pm remove rounded edge #69605

pepe

Participant

thanks for the responses Nadezhda removeClass ( ” JQX -rc -all” ) works great , but such as I can remove just the rounded edges on the left side ( top and bottom) . thank you.

April 7, 2015 at 6:03 am remove rounded edge #69617

Nadezhda

Participant

Hi pepe,

If you want to add rounded corner on top left, bottom left,top right or bottom right you can use ‘addClass’ function with the following classes jqx-rc-tl,jqx-rc-bl,jqx-rc-tr or jqx-rc-br. Also you can use classes for each separate side – jqx-rc-t(top corners), jqx-rc-b(bottom corners), jqx-rc-r(right corners) and jqx-rc-l(left corners).

Best Regards,
Nadezhda

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

April 9, 2015 at 7:20 pm remove rounded edge #69724

pepe

Participant

thanks for the responses Nadezhda.

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.