jQWidgets Forums

Tagged: DropDownList, dropdownlist control, style ui

This topic contains 4 replies, has 3 voices, and was last updated by Peter Stoev 11 years, 3 months ago.

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

Author

Style Questions Posts

March 19, 2014 at 2:23 pm Style Questions #51403

serge012374

Participant

Hello!

I have a couple of questions about the styles applied to the DropDownList:

1. I’d like to get rid of the drop shadow under the DropDownList when it’s open, or at least make it smaller.

2. The list, when it’s open, is not as wide as the content element. You can see it on the right hand side under the arrow – it’s shorter by 1 or 2 pixels. Can I change this, and make them the same width?

Thank you so much!

Sergey

March 19, 2014 at 5:44 pm Style Questions #51422

Peter Stoev

Keymaster

Hi Sergey,

1. The dropDownWidth property specifies the width of the DropDown.
2. Styling can be changed by editing the CSS files available in the download package. It depends on which theme you use. In general the .jqx-popup CSS class is applied to DropDown elements.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

March 19, 2014 at 6:42 pm Style Questions #51430

serge012374

Participant

Thank you! I think between the update to the latest version, and me changing .jqx-popup class a bit, both of these questions got resolved!

March 20, 2014 at 12:20 am Style Questions #51441

elixneto

Participant

Hello!

I’m trying to set UI-LIGHTNESS style for my dropdown.
I used the example that shows how can I ‘loadFromSelect’.
It works, but when I apply the theme: ‘ui-lightness’ the style looks bad!

My DropDown after apply style

Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="External/jquery-2.0.js" type="text/javascript"></script>
<script src="External/jqxWidgets/jqxcore.js" type="text/javascript"></script>
<script src="External/jqxWidgets/jqxcheckbox.js" type="text/javascript"></script>
<script src="External/jqxWidgets/jqxdropdownlist.js" type="text/javascript"></script>
<script src="External/jqxWidgets/jqxbuttons.js" type="text/javascript"></script>
<script src="External/jqxWidgets/jqxscrollbar.js" type="text/javascript"></script>
<script src="External/jqxWidgets/jqxlistbox.js" type="text/javascript"></script>
<link href="External/jqxWidgets/styles/jqx.ui-lightness.css" rel="stylesheet" type="text/css" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var updating = false;
                // Create a jqxDropDownList
                $("#jqxDropDownList").jqxDropDownList({ width: '200px', height: '25px', theme: 'ui-lightness', checkboxes: 'true' });
                // Load the data from the Select html element.
                $("#jqxDropDownList").jqxDropDownList('loadFromSelect', 'select');

                // updates the select's selection.
                $("#jqxDropDownList").on('select', function (event) {
                    if (event.args && !updating) {
                        var args = event.args;
                        // select the item in the 'select' tag.
                        var index = args.item.index;
                        $("#select").val(args.item.value);
                    }
                });
                // updates the dropdownlist's selection.
                $("#select").on('change', function (event) {
                    updating = true;
                    var index = $("#select")[0].selectedIndex;
                    $("#jqxDropDownList").jqxDropDownList('selectIndex', index);
                    $("#jqxDropDownList").jqxDropDownList('ensureVisible', index);
                    updating = false;
                });
                // selects the first item.
                $("#jqxDropDownList").jqxDropDownList('selectedIndex', '0');
            });
        </script>
        <div style='float: left; width: 500px;' id='jqxWidget'>
            <div style='float: left;' id='jqxDropDownList'>
            </div>
            <div style='float: left;'>
                <select style='height: 25px; width: 200px; margin-left: 30px;' id='select'>
                    <option>Affogato</option>
                    <option>Americano</option>
                    <option>Bicerin</option>
                    <option>Breve</option>
                    <option>Café Bombón</option>
                    <option>Caffé Corretto</option>
                    <option>Café Crema</option>
                    <option>Caffé Latte</option>
                    <option>Caffé macchiato</option>
                    <option>Café mélange</option>
                    <option>Coffee milk</option>
                    <option>Cafe mocha</option>
                    <option>Cappuccino</option>
                    <option>Carajillo</option>
                    <option>Cuban espresso</option>
                    <option>Espresso</option>
                    <option>The Flat White</option>
                    <option>Frappuccino</option>
                    <option>Galao</option>
                    <option>Greek frappé coffee</option>
                    <option>Iced Coffee?</option>
                    <option>Indian filter coffee</option>
                    <option>Instant coffee</option>
                    <option>Irish coffee</option>
                    <option>Liqueur coffee</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>

WHAT AM I DOING WRONG??

Sorry for my bad english, cause I’m brazilian!….

March 20, 2014 at 5:31 am Style Questions #51449

Peter Stoev

Keymaster

Hi,

You are missing the jqx.base.css. Before styling a widget, I suggest you to read the Styling and Appearance help topics available in the Documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.