theme topic

[jpereraParticipant]

Hello Everybody,

I have this situation, i want to put the option for the customer can change the theme dinamically, i know the restriction that only in the initialization of the widgets you could assign the theme, but this is not a problem, my problem is other, i have those references on my page:

<link type="text/css" rel="stylesheet" href="~/Content/Site.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.bootstrap.css" />
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxcore.js"></script>
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxdata.js"></script>
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="~/Scripts/JQWidgets/jqxprogressbar.js"></script>

If i want to change the theme i have to include the other ones css for the others themes, that’s correct???
When i put this line for include the other theme: <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.artic.css" />, in the application automatically everything change the theme for the default theme and don’t considered the property Theme on the widgets: In the widgets i have the property in that way:

 $("#tbDuressCreateCode").jqxInput({ placeHolder: "Enter Code...", theme: 'bootstrap' });
  $("#tbDuressCreateComent").jqxInput({ placeHolder: "Enter Comment...", theme: 'bootstrap' });

Please any help with this issue,

Thank you very much
Jose

[jpereraParticipant]

Thank you very much i solved the problem i was include the base script, I’m sorry…

Jose

[jpereraParticipant]

Hello,
I having so trouble with the themes that’s why i’m writing in the same post, i did the changed theme dinamically and it works very fine so far, the only issue that i have is with the combobox and the jqxDateTime, in those case when i put a theme like bootstrap for example all the values (the texts) are in color white then you can’t see the text but the value is in and it is correct…
I check the theme and it’s assigned a correct theme value…
Any idea of what could be happened!!!.
Thanks
Jose

[NadezhdaParticipant]

Hello Jose,

Please, provide us with a JSFiddle example which demonstrates the behavior which you observe so we can see what’s wrong in that code.

Best Regards,
Nadezhda

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

[jpereraParticipant]

Look I don’t have an account in JSFiddle but i will give you here a fragment of my code, i hope it’s look good.
I have include all the css of the themes:

 <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.arctic.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.black.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.classic.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.darkblue.css" />

This is the code html for the one of the component with the problem:

<div id="popupWindowThemeConfiguring">
    <div>
        <span>
            <img src="~/Content/Images/imChangeTheme.png" alt="" style="margin-right: 15px" /><b>MySecurity Account</b>- Change Theme...
        </span>
    </div>
    <div style="overflow: hidden;">
        <table>
            <tr>
                <td><div id="jqxTheme"></div></td>
                <td><input type="submit" value="Change" class="btn-primary" onclick="RedirectHome()" /></td>
            </tr>
        </table>
    </div>
</div>

As you could see this is html for a widget window and a combo that show a local array and a button…
The follow code is for the initialization of the widgets:

 $("#popupWindowThemeConfiguring").jqxWindow({ showCollapseButton: false, isModal: true, animationType: 'fade', resizable: false, showCloseButton: true, width: "320px", height: "100px" });
function ShowThemeWindow() {
            var themeVal = $.cookie("MSATheme");
            if (themeVal != '' && themeVal != null)
                themeVal = themeVal;
            else
                themeVal = "bootstrap";
            var source = [
                        "android",
                        "artic",
                        "black",
                        "bootstrap",
                        "classic",
                        "darkblue",
                        "energyblue",
                        "fresh",
                        "highcontrast",
                        "metro",
                        "metrodark",
                        "office",
                        "orange",
                        "shinyblack",
                        "summer"

            ];
            $("#jqxTheme").jqxComboBox({ source: source, width: '200', height: '20', placeHolder: "Change the Website Theme...", });
            $("#popupWindowThemeConfiguring").jqxWindow('open');
        }

If you check you will see that i don’t have a property theme on the combobox and i don’t know why when the window show the combo show me the placeHolder text correct and the list is correct and when you select on item in the list it selected but put the text on white.
At the last this the code that I’m using to change the theme for all the components:
the follow code is the function that i’m calling when you select a theme in the combo and press the button CHANGE, i’m refreshing all the pages.

 function RedirectHome() {
            $.cookie("MSATheme", $("#jqxTheme").jqxComboBox('val'));
            window.location.href = '@Url.Action("Index", "WorkPanel")';
        }

And this the code that i’m using to assign the them in the initialization:

var themeVal = $.cookie("MSATheme");
            if (themeVal != '' && themeVal != null)
                themeVal = themeVal;
            else
                themeVal = "bootstrap";

One last consideration, I believe that the problem is with the jqxwindow because the components only have the issue when i’m showing it in the jqxwindow.

Thank you very much…

Jose

[jpereraParticipant]

Hello, the issue that i was talking previously it seem to be some bug on Firefox because a test the application in IE v11 and it works fine…
Please if you find any solution please advice me so i could fix it..

Thank you

[NadezhdaParticipant]

Hi Jose,

You have no need an account in JSFiddle to make an example.
If you want to add theme to jQWidgets you should set the ‘theme’ property. For more information, please, refer to the API Documentation.

Best Regards,
Nadezhda

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

[jpereraParticipant]

Please, don’t give me a documentation again,
I have read it a lot of time and I wrote that the theme change works fine, this is not the problem, the problem is that in FireFox have a bug that the components jqxDateTimeInput and jqxComboBox show the text in white into a jqxwindow, no matter the theme that you have on the initialization of the control….
Thanks…
Jose

[NadezhdaParticipant]

Hi Jose,

We tested Default Functionality demos of jqxDateTimeInput and jqxComboBox in the latest version of Firefox (37.0.1) and everything works as expected. If you initialize jqxDateTimeInput and jqxComboBox in jqxWindow, please find the following examples:
-jqxComboBox in jqxWindow: http://jsfiddle.net/xqcsr4mj/.
-jqxDateTimeInput in jqxWindow: http://jsfiddle.net/rj4qe5h7/.

If this doesn’t help you fix your issue, please, provide us with a full sample or JSFiddle example which demonstrates your scenario, then we will be able to test with your code.

Best Regards,
Nadezhda

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

[jpereraParticipant]

thank you very much Nadezhda, it will be very helpful those examples…

Jose

[Author]

Posts