多级RTL联动选择器异常问题求助（Framework7）

Let's break down the problems in your code and fix them step by step to get the RTL picker working as expected:

1. Misplaced Content Outside App Root #

Your .block-title is positioned outside the Framework7 app container (#app), which means it won't inherit the RTL styles applied to the app. Move it inside the #app element to ensure consistent RTL styling across all UI components.

2. Incorrect Text Alignment for RTL Layout #

In RTL mode, textAlign: 'right' will actually align text to the visual left of the column (since text flows from right to left). To make text align to the visual right (the expected behavior for RTL), set textAlign: 'left' for each picker column.

3. Explicit RTL Configuration for Picker #

Even though your app has rtl: true enabled, explicitly setting rtl: true in the picker configuration ensures the component fully respects RTL rules—this is especially helpful in older Framework7 versions like 2.3.0 where inheritance might be inconsistent.

Fixed Code #

HTML #

<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 id="app">
  <div class="block-title">Dependent values</div>
  <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>

JavaScript #

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,
  rtl: true, // Explicitly enable RTL for the picker
  formatValue: function(values) {
    return values[1];
  },
  cols: [{
    textAlign: 'left', // Correct alignment for RTL visual flow
    values: ['Japanese', 'German', 'American'],
    onChange: function(picker, country) {
      if (picker.cols[1].replaceValues) {
        picker.cols[1].replaceValues(carVendors[country]);
      }
    }
  }, {
    textAlign: 'left', // Correct alignment for RTL visual flow
    values: carVendors.Japanese,
    width: 160,
  }],
  routableModals: false
});

Key Changes Explained #

• Moved the block title inside the app root to ensure it uses RTL styling.
• Adjusted text alignment to match RTL visual expectations (left alignment corresponds to visual right in RTL layout).
• Added explicit RTL configuration to the picker to avoid inheritance issues in older Framework7 versions.

These tweaks should resolve the alignment and behavior issues, making your dependent picker work smoothly in RTL mode.

内容的提问来源于stack exchange，提问作者Dorad