Supporting RTL

[tooot]

Hello,

Is there any new about full support of RTL layout for Modena ?

I'm waiting to hear a good news

[tooot]

ANY UPDATES..

[mert.sincan]

Sorry for my late reply, We added RTL feature in only Sentinel for now. I will work to add this feature into Modena and get back to you in this week.

Sentinel Example;

[tooot]

Thank you very much for your reply,

I will wait for this update .

[mert.sincan]

Please try with;

Code: Select all

<style type="text/css">
#logo {
    float: right;
}

/* Layout Menu */
#mobile-menu-button {
    float: right;
}

#layout-menu-cover {
    right: 0;
    margin-right: -320px;
}

#layout-menu-cover.showmenu {
    margin-right: 0px;
}

.layout-menu {
    direction: rtl;
}

.layout-menu > li > a > i {
    float: right;
    margin-right: 0px;
    margin-left: 8px;
}

.layout-menu li ul li a {
    text-align: initial;
}

.layout-menu li ul li a > i {
    float: right;
    margin-left: 4px;
    margin-right: 0px;
}

.layout-menu li ul li a > i.icon-add {
    float: left;
    text-indent: 0px;
}

.menu-level-1 {
    text-indent: 5%;
}
.menu-level-2 {
    text-indent: 10%;
}
.menu-level-3 {
    text-indent: 15%;
}

/* Top Menu */
#top-menu {
    float: left;
    direction: rtl;
}

#top-menu li ul.active-menu,
#top-menu li ul {
    margin: 12px -150px 0 0;
}

#top-menu li ul li a i {
    margin-right: 0px;
    margin-left: 5px;
    float: right;
}

#show-top-menu {
    float: left;
}

/* Perfect Scroll Bar */
.ps-scrollbar-y-rail {
    left: 3px;
}

@media (max-width: 960px) {
    #top-menu {
        right: 0px;
        left: 2%;
    }

    #top-menu li ul,
    #top-menu li ul.active-menu{
        margin: 0px;
    }

    #top-menu li ul li a {
        padding-right: 15px;
    }

    #top-menu > li > a {
        text-align: initial;
    }

    #top-menu > li > a i {
        float: right;
        margin-left: 5px;
        margin-right: 0px;
    }
}

@media (min-height: 320px) and (max-height: 560px) {
  #top-menu {
    max-height: 275px;
    overflow-y: auto;
  }

  #top-menu li ul li a {
      width: 200px;
  }
}
</style>

And add this JS code into layout.js or template.xhtml;

Code: Select all

<script type="text/javascript">

/* Set padding-right according to height of Topmenu on Mobile Mode */
$(document.body).ready(function(){
    var topMenu = $('#top-menu');
    
    topMenu.find('a').click(function(e) {
        var topHeight = topMenu.height(),
            maxHeight = topMenu.css('max-height'); /* 450 or 275 on media queries */
        if(topHeight >= parseInt(maxHeight)) {
            topMenu.find('li ul li a').css('padding-right', '30px');
        }
        else{
            topMenu.find('li ul li a').css('padding-right', '15px');
        }
    });
});      
</script>

**********ScreenShots**********

On Desktop;






On Tablet and Mobile;

[tooot]

Thank you very much for that,

Please check the forms it still LTR

[mert.sincan]

You need to override Forms and PF components. We can provide support RTL for only Layouts (layout menu, topbar etc.).
For RTL component;
You need to change float, margin, padding etc. of all component in theme.css. I think this project can help to you;
https://github.com/shahabkondri/primefaces demo-> http://showcase-shahabkondri.rhcloud.co ... ndex.xhtml
(You can checkout this project and build it. Then you can add its jar file in your project.)

[tooot]

Ok thank you very much

[mert.sincan]

You're welcome We will add RTL layout menu and RTL topbar fixes into next release.