jQWidgets Forums

Tagged: DropDownList, jqxDropDownList, Theme

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 12 years ago.

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

Author

jqxDropDownList inside jqxSplitter missing borders and fill-color in some themes? Posts
May 28, 2013 at 1:44 pm jqxDropDownList inside jqxSplitter missing borders and fill-color in some themes? #21966

SkippingAdi
Participant

Hi all
I have the page contents below. It’s build mostly on the jqWidgets demo examples. One jqxDropDownList outside and one inside a jqxsplitter widget:

<body>
    <div id=”jqxdropdownbutton1″>
    <div id=”jqxgrid1″>
    </div>
   </div>
<div id=”horizontalSplitter”>
<div id=”northContainer” style=”overflow: hidden !important;”>
<div id=”wrapperPanelNorth”><span>North</span>
<div style=”padding: 10px;”> </div>
</div>
</div>
<div id=”southContainer” style=”overflow: hidden !important;”>
<div id=”wrapperPanelSouth”><span>South</span></div>
</div>
</div>
</body>

JavaScript:
                $(‘#horizontalSplitter’).jqxSplitter({ theme: basicDemo.config.theme, width: 960, height: 400, orientation: ‘horizontal’, panels: [{ size: 200 }] });
                $(‘#wrapperPanelNorth,#wrapperPanelSouth’).jqxPanel({ width: ‘100%’, height: ‘100%’, theme: basicDemo.config.theme });
                $(“#jqxdropdownbutton1, #jqxdropdownbutton2”).jqxDropDownButton({ width: 150, height: 25, theme: basicDemo.config.theme });

                $(“#jqxgrid1, #jqxgrid2”).jqxGrid(
                    {
                        width: 550,
                        height: 400,
                        source: dataAdapter,
                        theme: basicDemo.config.theme,
                        columnsresize: true,
                        columns: [
                            { text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 90 },
                            { text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 90 },
                            { text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 180 },
                            { text: ‘Quantity’, datafield: ‘quantity’, width: 70, cellsalign: ‘right’ },
                            { text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’ }
                        ]
                    });

Choose a datasource of your choice that matchs the fields above for jqxgrid1 and jqxgrid2.

If you run these example (ok, there is some more work to complete it) and test the different theme’s like black, darkblue, fresh, ui-darkness, ui-le-frog or ui-sunny you will notice that the jqxDropDownList inside the jqxsplitter will miss for most ui-xy-themes the border and the fill-color? The jqxDropDownList outside the jqxSplitter doesn’t miss the
border and has the expected fill-color.
I noticed also, that the background isn’t applied to the panels inside the jqxSplitter!? By debuging with IE Developer Tools I can activate the background-image (url(images/sunny/ui-bg_gloss-wave_60_fece2f_500x100.png) #fece2f repeat-x 50% 50%) that probably should be displayed when e.g. theme ui-sunny is applied?

Is this by design or is there something missing?
Environment:
Windows 7 64Bit, IE8, FireFox 13,  jqWidgets 2.8

Regards
Adrian

May 29, 2013 at 6:50 am jqxDropDownList inside jqxSplitter missing borders and fill-color in some themes? #21994

Dimitar
Participant

Hello Adrian,

We have tested your example and we did not have any issues with it (using version 2.8.3). However, there are some things that need clarification:
1) You refer to jqxDropDownList, however you use only jqxDropDownButton;
2) There is no div for the initialization of #jqxdropdownbutton2.

Please update to the latest version and provide us with feedback.

Best Regards,
Dimitar

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

May 29, 2013 at 7:47 am jqxDropDownList inside jqxSplitter missing borders and fill-color in some themes? #21998

SkippingAdi
Participant

Hi Dimitar

Thank you for reply. Sorry for my bad example and confusion.
I have created a jsfiddle to demonstrate the problem and yes anyway if jqxDropDownList or jqxDropDownButton the behavior is as I have described in my first post.

http://jsfiddle.net/SkippingAdi/TBF93/14/

Please notice also the positioning of the vertical scrollbar. What’s that?

Hope this helps reproduce the problem I have.

Regards
Adrian

May 29, 2013 at 8:06 am jqxDropDownList inside jqxSplitter missing borders and fill-color in some themes? #21999
Dimitar
Participant
Hi Adrian,

The source of the issue is a misplaced class in the theme’s CSS file. You may remove the following from the ui-sunny.css file as a workaround:
```
.jqx-splitter-ui-sunny .jqx-widget-content-ui-sunny{border-width:0px; background: #fff;}
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
May 29, 2013 at 9:16 am jqxDropDownList inside jqxSplitter missing borders and fill-color in some themes? #22010

SkippingAdi
Participant

Hi Dimitar

Thank you for your reply. I must say: That solved the bug!

When will this bug be fixed? Is it already fixed in version 2.8.1 or higher?

Regards
Adrian

May 30, 2013 at 8:26 am jqxDropDownList inside jqxSplitter missing borders and fill-color in some themes? #22130

Dimitar
Participant

Hi Adrian,

We always test with and provide solutions for the latest version of jQWidgets (as of now, it is 2.8.3) in the forum. The reported CSS issue will be fixed in the upcoming version 2.9.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.