RTL Support - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: DropDownList, javascript dropdownlist, jQuery DropDownList, rtl combobox, rtl dropdownlist, rtl support

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

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

Author

RTL Support Posts

March 15, 2012 at 8:15 am RTL Support #2772

AceDZN

Member

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

March 15, 2012 at 1:02 pm 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

March 15, 2012 at 2:11 pm 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 🙁

March 15, 2012 at 2:29 pm 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

March 15, 2012 at 2:56 pm 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…)

March 15, 2012 at 3:01 pm 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

March 15, 2012 at 3:43 pm 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?

March 15, 2012 at 4:03 pm 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

March 15, 2012 at 4:26 pm 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

Author

Posts

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

You must be logged in to reply to this topic.