Combo-box Input Margin

[niko316Participant]

Hi, i’m trying your widgets for the first time, and I’m having a problem with the input field inside a Combo-box. For some reason, the top margin of the input is being set to half the height of the combo-box, resulting in the text showing only halfway when selecting an item or introducing it and the width of the combo being 25px or less. I don’t know if this is a normal behaviour or a bug. Jqwidget’s version i’m using is 2.5.0.

Thanks in advance for any help.

[DimitarParticipant]

Hello niko316,

Could you, please, provide us with more information on the matter – do you experience the issue with any of the jqxCombobox demos? If not could you provide us with a code snippet, so that we may better be of help? In addition, please make sure that the ComboBox’s DIV tag is visible when you initialize the widget.

Looking forward to your reply.

Best Regards,
Dimitar

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

[niko316Participant]

Maybe is a problem with the visibility of the div. I’m using Knockout (and MVVM). Here’s a snippet of the html:

<div class="col_80">
        <fieldset class="label_side top">
            <label>Cliente</label>
            <div class="clearfix">
                <div id= "clientesComboBox" data-bind="jqxComboBox: { comboOptions: { data: clientesList, width: '250px', height: '25px', dropDownWidth: '250px', displayText: 'nombre', objectIdRef: 'id', autocomplete: 'true', searchMode: 'containsignorecase', selectedItem: clienteSeleccionadoCombo}}"></div>
            </div>
        </fieldset>
    </div>

And here is the js:

 ko.bindingHandlers.jqxGrid = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var binding = ko.utils.unwrapObservable(allBindingsAccessor());
            //debugger;
            var options = binding.jqxGrid || {};
            //debugger;
            var sourceGrid =
            {
                localdata: options.data,
                datatype: 'observablearray'
            };
            var theme = "darkblue";
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(sourceGrid);
            //debugger;
            // initialize jqxGrid
            $(element).jqxGrid(
            {
                width: options.totalwidth,
                source: dataAdapter,
                theme: theme,
                pageable: options.pageable,
                autoheight: options.autoheight,
                sortable: options.sortable,
                altrows: options.altrows,
                pagesize: options.pagesize[0],
                enabletooltips: options.enabletooltips,
                pagesizeoptions: options.pagesize,
                editable: options.editable,
                selectionmode: options.selectionmode, //'singlerow' |'multiplecellsextended'
                columns: options.columns
            });
            $(element).bind('rowdoubleclick', function (event) {
                if (options.canSelect) {
                    var args = event.args;
                    var row = args.rowindex;
                    var datos = $(element).jqxGrid('getrowdata', row);
                    options.selectedRow(datos[options.objectIdRef]);
                    //debugger;
                }
            });
        }
    };

I’ve made my own binding because the default wasn’t working. None of the css classes modifies the input margin. The resulting html for the input is:

<input class="jqx-combobox-input jqx-combobox-input-darkblue jqx-widget-content jqx-widget-content-darkblue jqx-rc-all jqx-rc-all-darkblue" type="textarea" style="margin: 12.5px 0px 0px; padding: 0px; border: 0px none; width: 100%;" autocomplete="off" name="clientesComboBox">

And analizing it with Firebug in Firefox (or Web Developer Tools in Chrome) i can see that the margin is not being set by any of the css and its an element style property.

[DimitarParticipant]

Hi niko316,

If the div or its parent element is hidden before the combobox’s initialization, the combobox cannot set its margins properly.

Best Regards,
Dimitar

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

[niko316Participant]

That was the problem. Thanks! (Sorry for the late reply).

[Author]

Posts