samedi 5 mars 2016

How to display checkbox in right of lable when use icheck.js in RTL direction page?

I try to use icheck.js in my website.Direction of my website is rtl .I add css and js files to my page but when run juery code: checkbox don't display .I try to change css of elements but I can not solve it.

<!DOCTYPE html>
<html xmlns="http://ift.tt/lH0Osb">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-reset.css" rel="stylesheet" />
    <link href="js/iCheck/skins/minimal/minimal.css" rel="stylesheet" />
    <link href="js/iCheck/skins/square/square.css" rel="stylesheet" />
    <link href="js/iCheck/skins/square/red.css" rel="stylesheet" />
    <link href="css/clndr.css" rel="stylesheet" />
    <link href="js/morris-chart/morris.css" rel="stylesheet" />
    <link href="js/iCheck/skins/square/blue.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <link href="css/style-responsive.css" rel="stylesheet" />




</head>
<body dir="rtl" style="background-color:#ffd800">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <div class="square single-row">
                <div class="checkbox ">
                    <input type="checkbox" id="enableOrDesable" />
                    <label>پست فعال / غیر فعال </label>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-ui-1.10.3.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/modernizr.min.js"></script>
    <script src="js/jquery.nicescroll.js"></script>
    <script src="js/iCheck/jquery.icheck.js"></script>
    <script src="js/scripts.js"></script>






    <script>
    $(function () {
        $('#enableOrDesable').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue',
            increaseArea: '20%' // optional
        });
    });

    </script>
</body>
</html>

Demo




Aucun commentaire:

Enregistrer un commentaire