jQuery UI Widgets Forums Lists DropDownList RTL Support

This topic contains 8 replies, has 2 voices, and was last updated by  AceDZN 11 years, 11 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    RTL Support Posts
  • RTL Support #2772

    AceDZN
    Member

    is there a Way to Give RTL Supoprt for the dropdownList & The ComboBox?

    RTL Support #2773

    Peter Stoev
    Keymaster

    Hi AceDZN,

    Unfortunately, we still do not have RTL support in our widgets. This is a feature that we are going to implement in the second half of the year.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    RTL Support #2774

    AceDZN
    Member

    🙁 too bad…
    I’ve did a lot of cool things with those widgets – & now I need to add multilingual support for the site & one of the most used languages is RTL 🙁
    wow, Now I really don’t know what to do with it 🙁

    RTL Support #2775

    Peter Stoev
    Keymaster

    Hi AceDZN,

    Do you need RTL support only for the DropDownList and ComboBox?
    Could you explain your expectations on the RTL support for these widgets – Vertical ScrollBar position at the left side of the widget instead of right? DropDown arrows positioned at the left side and strings aligned to right?

    Looking forward to your reply.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    RTL Support #2776

    AceDZN
    Member

    H there!
    I need it only for the DropDownList and ComboBox…
    the most critical thing is the text-alignment (now it floats left – in RTL we need it aligned to right.).
    all the rest I can use as it is… (until it will be a full rtl support…)

    RTL Support #2777

    Peter Stoev
    Keymaster

    Hi AceDZN,

    I think that we can easily resolve this by changing the text-align CSS property dynamically.

    For example:

    var items = $("#jqxWidget").jqxDropDownList('getItems');
    $.each(items, function () {
    $(this.element).css('text-align', 'right');
    });

    Hope this helps you.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    RTL Support #2778

    AceDZN
    Member

    it did nothing..
    but i know what I need to do..
    I have this hyrarchy:

    div (id=listBoxContent)
    div (tabindex=”1″ – no class \ id)
    div (position absolute, left:0, top:0 – no class\id)
    span(position absolute, left:0, top:0 – no class\id)

    I NEED TO CHANGE THE LAST DIV and SPAN to:
    style=”position:absolute; right:0;top:0;”

    How can I can define those elements?

    • This reply was modified 11 years, 11 months ago by  AceDZN.
    • This reply was modified 11 years, 11 months ago by  AceDZN.
    RTL Support #2781

    Peter Stoev
    Keymaster

    Hi AceDZN,

    Before I sent you the code, I tested it and it works on my side – it aligns the item strings to the right position. I am sending you my full page’s code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var source = [
    "Affogato",
    "Americano",
    "Bicerin",
    "Breve",
    "Café Bombón",
    "Café au lait",
    "Caffé Corretto",
    "Café Crema",
    "Caffé Latte",
    "Caffé macchiato",
    "Café mélange",
    "Coffee milk",
    "Cafe mocha",
    "Cappuccino",
    "Carajillo",
    "Cortado",
    "Cuban espresso",
    "Espresso",
    "Eiskaffee",
    "The Flat White",
    "Frappuccino",
    "Galao",
    "Greek frappé coffee",
    "Iced Coffee",
    "Indian filter coffee",
    "Instant coffee",
    "Irish coffee",
    "Liqueur coffee"
    ];
    // Create a jqxDropDownList
    $("#jqxWidget").jqxDropDownList({ keyboardSelection: true, source: source, selectedIndex: 1, width: '200', height: '25', theme: '' });
    var items = $("#jqxWidget").jqxDropDownList('getItems');
    $.each(items, function () {
    $(this.element).css('text-align', 'right');
    });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>

    Please try the above code on your side.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    RTL Support #2782

    AceDZN
    Member

    My Source is too much complicated for this hehe…
    but I’ve opened the jqxlistbox.js file – and added class to the:

    var b=a("<div style='border: none; tabIndex=0 width:100%; height: 100%; align:left; valign:top; position: absolute;'></div>")

    🙂
    Now I Can edit the styling thru the css Normally – & everything is working like I wanted to 🙂

    best regards
    -Alex

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.