jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by dpdragnev 12 years, 7 months ago.

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

Author

DropDownList appearance Posts

November 3, 2012 at 6:26 am DropDownList appearance #10486

Member

Hello,

I have a jqxDropDownList that is bound to a json array. Everything works well except the fact that the dropdown icon is not showing. Here is my code:

var source =
    {
        datatype: "json",
        datafields: [
            { name: 'RoleId' },
            { name: 'RoleName' }
        ],
        url: '../Admin/GetRoles',
        id: 'RoleId'
    };
    // create a new instance of the jqx.dataAdapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // Create a jqxDropDownList
    $("#jqxdropdownlist").jqxDropDownList({ source: dataAdapter,
        width: 310,
        height: 30,
        displayMember: 'RoleName',
        valueMember: "RoleId",
        theme: 'classic',
        selectedIndex: 0,
        promptText: 'Select a Role:'
    });

I looked in the images folder under jqwidgets/style and the file icon-down.png is there. Do I need to specifically indicate that I want this icon displayed?

Thank you,

Daniel Dragnev

November 3, 2012 at 9:03 am DropDownList appearance #10491

Peter Stoev

Keymaster

Hi Daniel,

If the jqwidgets/styles/images folder is there, the only thing that could lead to such behavior is a CSS conflict with other styles in the application. Would you send a small app to support@jqwidgets.com which reproduces the behavior? That will allow us to test and debug the specific app scenario.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 3, 2012 at 2:27 pm DropDownList appearance #10495

dpdragnev

Member

Peter,

Thank you for your response. The solutions I am working on is a kind of big and it would be difficult to isolate this portion so I can send you. However, I will send you the only css files that I am including in addition to jqx.base.css and jqx.classic.css. Maybe you can spot something there.

I will send them to support@jqwidgets.com with a subject CSS file for topic DropDownList appearance

Thank you

November 5, 2012 at 11:22 am DropDownList appearance #10537

Peter Stoev

Keymaster

Hi Daniel,

Unfortunately, we weren’t able to reproduce that locally.

Here’s the result from my test:

my test 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="Site.css" type="text/css" />
    <link rel="stylesheet" href="Custom.css" type="text/css" />
   <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.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 theme = getTheme();
                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({ source: source, selectedIndex: 1, width: '200', height: '25', theme: theme });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

May be this might be helpful: http://stackoverflow.com/questions/12088565/mvc4-project-images-not-displaying

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 5, 2012 at 1:45 pm DropDownList appearance #10539

dpdragnev

Member

Peter,

I managed to resolve the issue. I am not sure why, but for some reason the background set by ‘images/icon-down.png’ was not picking up the image even though the images directory is in the styles folder where the css is located. I have your files placed in the root of the solution in folder called jqwidgets and as soon as I changed the background from ‘images/icon-down.png’ to /jqwidgets/styles/images/icon-down.png the image showed up.

This is a complete mistery to me, but it seems that css got confused when referencing the file and using the path starting from the root fixed the issue.

Just in case someone else has the same problem.

Thank you,
Daniel

Author

Posts

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

You must be logged in to reply to this topic.