Bootstrap rtl (right to left) input groups
here is a working solution :
.input-group {
direction:rtl !important;
}
.input-group-btn:last-child >.btn {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
border-right-width:0px !important;
border-left-width:1px !important;
}
.input-group .form-control:first-child {
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
You have all the components there, just in the wrong order :)
You want your span to come before your input element if you want it on the left side of the input. Also, you don't need the dir="rtl"
attribute on the input-group
element (the outer div), only on the input element itself.
So you would just need to change your code to the following:
<div class="input-group">
<span class="input-group-btn">
<button ng-click="editor.removeQuestion(question)"
title="Remove question"
class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
<input type="text" lang="fa" dir="rtl" class="form-control"/>
</div>