Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-3028

Direction RTL render wrongly on combobox , Grid , TabBox

    XMLWordPrintable

    Details

      Description

      ZK supports direction RTL "Right to left" but some components render wrongly if we used direction: rtl as css

      1- combobox
      Problem:
      wrong style + comboxpopup appears on wrong place on rtl direction.
      Code:
      <combobox style="direction:rtl;">
      <comboitem label="Simple and Rich" />
      <comboitem label="Cool!" />
      <comboitem label="Thumbs Up!" />
      </combobox>

      2- Tabbox
      Problem:
      left & right buttons "chevron" does not appears correctly in rtl direction and also if you click on one of them will hide all tabs not get next tab.

      Code:
      <tabbox width="250px" style="direction:rtl;">
      <tabs>
      <tab label="Tab 1" closable="true"/>
      <tab label="Tab 2" closable="true"/>
      <tab label="Tab 3" closable="true"/>
      <tab label="Tab 4" closable="true"/>
      <tab label="Tab 5" closable="true"/>
      </tabs>

      <tabpanels>
      <tabpanel>This is panel 1</tabpanel>
      <tabpanel>This is panel 2
      The second panel</tabpanel>
      <tabpanel>This is panel 3</tabpanel>
      <tabpanel>This is panel 4</tabpanel>
      <tabpanel>This is panel 5</tabpanel>
      </tabpanels>
      </tabbox>

      3- Grid
      Problem:
      frozen does not work on rtl direction, it throw error "positive number only"

      Code:
      <zk>
      <grid style="direction:rtl;">
      <frozen columns="2" start="1"/>
      <columns >
      <column label="Author" sort="auto" width="100px"/>
      <column label="Title" sort="auto" width="300px"/>
      <column label="Publisher" sort="auto" width="600px"/>
      <column label="Hardcover" sort="auto" width="400px"/>
      </columns>
      <rows>
      <row>
      <label value="Philip Hensher"/>
      <label value="The Northern Clemency"/>
      <label value="Knopf (October 30, 2008)"/>
      <label value="608 pages"/>
      </row>
      </rows>

      </grid>
      </zk>

        Attachments

        1. combobox LTR.png
          combobox LTR.png
          0.5 kB
        2. combobox RTL.png
          combobox RTL.png
          0.6 kB
        3. grid LTR.png
          grid LTR.png
          7 kB
        4. grid RTL.png
          grid RTL.png
          6 kB
        5. tabbox LTR.png
          tabbox LTR.png
          3 kB
        6. tabbox RTL.png
          tabbox RTL.png
          1 kB

          Activity

            People

            Assignee:
            Unassigned Unassigned
            Reporter:
            abouklila abouklila
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated: