RTL support for bootstrap 3 submenus

Question

I'm having a problem adjusting drop down sub menus to open to the right side (the software layout is in Hebrew).

I saw similar answers with providing external libraries, I don't want to do that. I want simply twick my css a bit so it will work ,I'm almost there, this is where you can help me :)

Those 2 pictures illustrate the issues I'm experiencing:

I have three problems:

1. change caret position to the left
2. change caret location to the left
3. open submenu to the left side (right now it opens to the left but overlaps with the main one, but I can live with that, the above 2 are much more important)

In this link, it is mentioned that bootstrap 3 doesn't support sub menus no more, I'm controlling it at my css.

**

• html

**:

<div ng-show="buildings.total_buildings" tooltip="מגוון פעולות שניתן לבצע על הרשומות שבחרתם" class="btn-group">
    <button class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
        <i class="fa fa-lg fa-building "></i>
        <span class="caret"></span> 
        <span class="badge_success badge">{{buildings.total_buildings}}</span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="javascript:void(0);" ng-click="buildings.user.exportHtmlTableToPdf('buildings_table', 'lskd')"><i class="fa fa-file-pdf-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;יצא לקובץ pdf</a>
        </li>   

        <li class="dropdown-submenu pull-left">
            <a href="javascript:void(0);"><i class="fa fa-envelope-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;שלח מייל</a>
            <ul href="javascript:void(0);" class="dropdown-menu">
                <li><a href="javascript:void(0);"><i class="fa fa-building"></i>&nbsp;&nbsp;&nbsp;&nbsp;כולם</a>
                </li>                               
                <li><a href="javascript:void(0);"><i class="fa fa-building owner"></i>&nbsp;&nbsp;&nbsp;&nbsp;בעלים</a>
                </li>
                <li><a href="javascript:void(0);"><i class="fa fa-building renter"></i>&nbsp;&nbsp;&nbsp;&nbsp;שוכרים</a>
                </li>
                <li><a href="javascript:void(0);"><i class="fa fa-building defecto"></i>&nbsp;&nbsp;&nbsp;&nbsp;דיירים</a>
                </li>
            </ul>
        </li>

        <li>
            <a href="javascript:void(0);" ng-click="return"><i class="fa fa-comment-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;שלח סמס</a>
        </li>
        <li>
            <a href="javascript:void(0);" ng-click="return"><i class="fa fa-envelope-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;שלח מייל</a>
        </li>                       
        <li>
            <a href="javascript:void(0);" ng-click="buildings.showBuildingsData()"><i class="fa fa-male"></i>&nbsp;&nbsp;&nbsp;&nbsp;הצג דיירים</a>
        </li>
        <li>
            <a href="javascript:void(0);" ng-click="return"><i class="fa fa-database"></i>&nbsp;&nbsp;&nbsp;&nbsp;קרא וטען נתונים</a>
        </li>
        <li>
            <a href="javascript:void(0);" ng-click="return"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;מחק </a>
        </li>
    </ul>
</div>

**

• CSS

**:

.dropdown-submenu {
    position: relative;
    text-align: right;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: right !important;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    right: 100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

Answer 1

Please take a look at this jsFiddle. I've made a few changes to your CSS and added some new styles:

.btn-group, .btn-group-vertical {
    float: right;
}
.dropdown-menu {
    min-width: 190px;
}
.dropdown-menu>li>a {
    text-align: right;
}
.dropdown-submenu>a:before {
    content:'◄';
    float: left;
    margin-left: 0px;
    color: #ccc;
    font-size: 10px;
    margin-top: 3px;
}
.dropdown-submenu>a:after {
    display: none;
}
.dropdown-submenu>a:hover:before {
    color: #fff;
}