RTL picker with dependent values

Question

The reequirement is to make an RTL picker with multiple levels.

I copied the example from the documentation into a page equiped with the official frameworks' CSS for RTL users.

I have modified "textAlign" properties of each column as well. For some reason the picker isn't acting as expected. open the snippet in full page mode.

var app = new Framework7({
  root: '#app',
  rtl: true,
  theme: 'md'
});
app.views.create('#mainView', {
});

var carVendors = {
  Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
  German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
  American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
};
var pickerDependent = app.picker.create({
  inputEl: '#demo-picker-dependent',
  rotateEffect: true,
  formatValue: function(values) {
    return values[1];
  },
  cols: [{
      textAlign: 'right',
      values: ['Japanese', 'German', 'American'],
      onChange: function(picker, country) {
        if (picker.cols[1].replaceValues) {
          picker.cols[1].replaceValues(carVendors[country]);
        }
      }
    },
    {
      textAlign: 'right',
      values: carVendors.Japanese,
      width: 160,
    },
  ],
  routableModals:false
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/css/framework7.rtl.md.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/js/framework7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-title">
  Dependent values</div>
<div id="app">
  <div id="mainView">
    <div class="list no-hairlines-md">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

That seems like a bug in Framework7. CSS 'right' and 'left' properties for first and last '.picker-column' don't fit RTL layout (flipped). The attached repair solved it.

var app = new Framework7({
  root: '#app',
  rtl: true,
  theme: 'md'
});
app.views.create('#mainView', {
});

var carVendors = {
  Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
  German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
  American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
};
var pickerDependent = app.picker.create({
  inputEl: '#demo-picker-dependent',
  rotateEffect: true,
  formatValue: function(values) {
    return values[1];
  },
  cols: [{
      textAlign: 'right',
      values: ['Japanese', 'German', 'American'],
      onChange: function(picker, country) {
        if (picker.cols[1].replaceValues) {
          picker.cols[1].replaceValues(carVendors[country]);
        }
      }
    },
    {
      textAlign: 'right',
      values: carVendors.Japanese,
      width: 160,
    },
  ],
  routableModals:false
});

.picker-column.picker-column-first:after{
  left:100% !important;
  right:0 !important;
}
.picker-column.picker-column-last:after{
  left:0 !important;
  right:100% !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/css/framework7.rtl.md.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/js/framework7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-title">
  Dependent values</div>
<div id="app">
  <div id="mainView">
    <div class="list no-hairlines-md">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

EDIT: github issue