Question

How do I style the select list element?
Here’s my code as it is now…

$('.editableSelect').editable(function(value, settings) {
    if (this.revert == value) {
        this.reset();
        return;
    }
    setSaveButtonRed(this);
    setDescFromAccountCode(this, value);
    return (value);
}, {
    type: 'select',
    submit: '<button type="submit" class="checkbookButton">OK</button>',
    data: $('#accountCodesForSelect').val(),
    cssclass: 'checkbookSelect',
    //style: 'font-family: Verdana,Helvetica,Sans-Serif; font-size:0.75em; width:700px;',
    tooltip: "Click to edit...."
});  

and the class checkbookSelect looks like this…

.checkbookSelect
{
    font-family:Verdana,Helvetica,Sans-Serif;
    font-size:0.75em;
}

But when I click in the, in this case, the table cell (and jEditable fires) and the select list appears, it’s not styled…

I’m thinking that the cssclass setting in jEditable is only for the span that jEditable creates and maybe doesn’t apply to whatever input element it creates…so maybe the answer is to use a more specific jQuery selector and/or jQuery’s live() method to choose the select list element and then apply the styling that way?

Note that I also tried using the style attribute/setting…it’s commented out above.

BTW jEditable is an awesome script…and I’ve blogged abt how to set up datepicker and jEditable here…

Answer 1

Was able to set styling on the drop down by adding this line to jquery.jeditable.js near line 270 or so of version 1.7.1…probably doesn’t matter re the exact line number but I put it there as that’s where the script author checks for settings.select

$('select').addClass(settings.cssclass);

I’m sure the selector could be tweaked too…but at least this works for now…I’ll tighten it up later but in case anyone else had the same question…just wanted to let you know how I got it to work

I’ve refined the selector to this…

$(form).children('select').addClass(settings.cssclass);

works much better now…