0

I have this markup:

<div style="direction: rtl; text-align: right;">
    <div class="form-inline">
        <div class="form-group col-lg-3">
            <label class="hidden-sm hidden-xs">بازه زمانی </label>
            <select class="form-control">
                <option value="1">1 روز گذشته</option>
                <option value="2">2 روز گذشته</option>
                <option value="3" selected="selected">3 روز گذشته</option>
                <option value="4">1 هفته گذشته</option>
                <option value="5">2 هفته گذشته</option>
                <option value="6">1 ماه گذشته</option>
                <option value="0">تعیین زمان</option>
            </select>
        </div>
    </div>
</div>

As you can see, I'm using bootstrap v3.1.1. The problem is, when I see the page in Chrome, some options get padding:

enter image description here

Here is a working demo. I tried to remove all padding and margins by css; But nothing changed. Do you have any idea, why it's happening?

amiry jd
  • 27,021
  • 30
  • 116
  • 215

1 Answers1

1

You can fix this by setting text-align property for <option> elements:

.form-control option {
  text-align: right;
}

Seems line in Chrome direction: rtl; not align text properly and trying to recalculate it position as options changed their positions on show.

updated demo

antyrat
  • 27,479
  • 9
  • 75
  • 76
  • Nothing changed. I tested it previously. But thank you. – amiry jd Sep 23 '14 at 18:22
  • @Javad_Amiry what browser do you use? Maybe this is browser specific? IE? Have you tried it on other browsers? – antyrat Sep 23 '14 at 20:50
  • I'm using Google Chrome Version 37.0.2062.120 m – amiry jd Sep 23 '14 at 21:02
  • @Javad_Amiry windows? – antyrat Sep 23 '14 at 21:06
  • @Javad_Amiry I have tested on Ubuntu and Mac OS X. And everything is fine for me. My fix worked only under Ubuntu on latest Google Chrome. Under Mac OS X I don't see any problems in both versions. Seems like this is only windows problem. Anyway styling option elements for Google Chrome is bad idea as there is no cross-browser solution. More info you can find here http://stackoverflow.com/questions/4748875/how-can-i-control-the-height-of-an-option-element-in-webkit/4749864#4749864 What I can recommend you is to create your own select control using JavaScript or deal with what you have. – antyrat Sep 23 '14 at 21:10