Themes for html input fields

[Michael76Member]

Hi Peter,

Is it possible to apply the particular theme (for example ui-sunny) to a normal html input field (text)?

Thank You!

[Peter StoevKeymaster]

Hi Michael76,

We are working on jqxInput widget which will be with our themes. Until then, you can add the following CSS classes to your input fields: jqx-input and jqx-input-themename. For ui-sunny, add the jqx-input and jqx-input-ui-sunny CSS classes to your input fields.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Michael76Member]

Thanks Peter, i tryed it, but also after it html input doesn’t look like jqxNumberInput (for example). You can see it also on your own Demo
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htm with ui-sunni.

[Peter StoevKeymaster]

Hi Michael76,

In the demo we haven’t added the jqx-rc-all class for rounding the widget’s border. The background of the numberinput comes from jqx-input-content class.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Michael76Member]

I ‘ve added this two classes to $(“#firstName”) in the Demo, but nothing happened…

[Peter StoevKeymaster]

Hi Michael76,

Here’s a code based on the PopupEditing example:

           // initialize the input fields.
            $("#firstName").addClass('jqx-input');
            $("#lastName").addClass('jqx-input');
            $("#product").addClass('jqx-input');
            $("#firstName").addClass('jqx-rc-all');
            $("#lastName").addClass('jqx-rc-all');
            $("#product").addClass('jqx-rc-all');
          
            $("#firstName").width(150);
            $("#firstName").height(23);
            $("#lastName").width(150);
            $("#lastName").height(23);
            $("#product").width(150);
            $("#product").height(23);
            if (theme.length > 0) {
                $("#firstName").addClass('jqx-input-' + theme);
                $("#lastName").addClass('jqx-input-' + theme);
                $("#product").addClass('jqx-input-' + theme);
                $("#firstName").addClass('jqx-rc-all-' + theme);
                $("#lastName").addClass('jqx-rc-all-' + theme);
                $("#product").addClass('jqx-rc-all-' + theme);
            }

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Michael76Member]

Thank you very much, Peter, now it is OK!

[Author]

Posts