Dojo combobox style overide in CSS does not work for combo box items

[guest]

I have defined my class for combobox:

<select dojoType="ComboBox?" ... class="PersonageSelector?">...</select>

And after in CSS i'm trying to override:

.PersonageSelector? .dojoComboBoxItem {

padding-left: 12px; padding-top: 12px; margin: 0px;

}

But in browser, i see default dojo style.

In page source i can see that dojoPopupContainer appears after dojoComboBoxOuter div. And i think it's reason of issue.

Is this a well know problem? Any workaround?

[[email protected]…]

This patch fixes it for me, the problem is with the Popup container appending the DOM node at the bottom of the document

[[email protected]…]

This patch fixes it for me, the problem is with the Popup container appending the DOM node at the bottom of the document

[guest]

ok this should the proper patch

[Jonathan Bond-Caron]

Hmm, ok I hate submitting patches through this thing!

Anyways you should get the point from the patch...

Also the documentation is unclear:

open: function(/*Integer*/x, /*Integer*/y, /*DomNode?*/parent, /*Object*/explodeSrc, /*String?*/orient, /*Array?*/padding){

The parent is not a DomNode? but rather an html widget, at least that's how it seems to be called by other widgets... could make checks to be safe.

jon

[bill]

Your patch attaches the popup to parent.domNode instead of document.body, but that won't work because of cutoff problems. (Imagine that the combobox is inside a <div style="height:100px; overflow: auto">. The drop down list will only be half visible on the screen. See the last test in test_layoutContainer.html for an example.)

[Jonathan Bond-Caron]

New patch: alwaysVisible solution

[Jonathan Bond-Caron]

Hi Bill,

Thanks for pointing that out, please review the new proposed patch.

We could argue on what the default behavior should be for the combobox (alwaysVisible: false or alwaysVisible:true) but I feel the expected & default behavior should be to append the popup inside the comboxbox container.

By properly documenting the problem, users could choose to set alwaysVisible:true (as I did in test_layoutContainer.html)

Let me know your thoughts, jon

[bill]

Well, I don't want to add a new "alwaysVisible" flag to Combobox (and every other drop down widget) because that requires more code, and more testing each release (specifically, testing both alwaysVisible=true and alwaysVisible=false mode), and it doesn't really seem related to the CSS issue. Why not just have a dropDownClass attribute that sets the class on the drop down div?

[Jonathan Bond-Caron]

Hi Bill,

Just read your article, Ajax and REST... good stuff. I would defineltly put more-responsive UIs at the top. It's all about providing quick feedback to the user based on his interaction with an application.

"Why not just have a dropDownClass attribute that sets the class on the drop down div"

There's probably another fix possible along those lines but it's another bad hack. I'll sum up the problem:

#blue .dojoComboBoxItemHighlight {

background-color:#000066;

}

#black .container .dojoComboBoxItemHighlight {

background-color:#000000;

}

<p>Blue style</p>

<div id="blue">

<input dojoType="Combobox" dataUrl="TestAutoComplete?.js" />

</div>

<p>Black highlight</p>

<div id="black">

<div class="container">

<input dojoType="Combobox" dataUrl="TestAutoComplete?.js" />

</div>

</div>

Now when I write this, I would expect that the Comboxbox markup would be contained where it is. But the Popup widget really applies a 'hack' by appending the node to the document body. So the CSS styling is lost. And as far I know, the popup widget is the only widget that breaks the markup consistency.

So if you really want to keep the popup node appended to the body, a proper fix would be get ALL classes from the popup's parent (until you reach the body tag or null) and recreate the markup.

i.e.

<div id="black">

<div class="container">

<dojo combobox markup here.... />

</div>

</div>

(append to the body) <div id="black">

<div class="container">

<the popup here.... />

</div>

</div>

Note that you end up having to duplicate the id, so really it's another bad hack. In my opinion, the following:

<div style='height:20px'><input dojoType="Combobox" dataUrl="TestAutoComplete?.js" /></div>

SHOULD hide the combobox popup, the CSS is rendered properly (but yes there's a cut-off). Dojo could provide an additional flag (i suggested alwaysVisible), to append the node to the body...

jon

[alex]

the provided patch does not meet our style guidelines. scheduling this to be closed in 0.5 one way or the other.

[Jonathan Bond-Caron]

Where can I find the style guidelines?

[bill]

http://dojotoolkit.org/js_style_guide.html and ​http://dojo.jot.com/Code%20Documentation

[Adam Peller]

Jonathan, is this still an issue in 0.9?

[haysmark]

In 0.9, ComboBox? uses the dijitMenu and dijitMenuItem classes for a consistent look across menus. If you want to change how your menus look you can simply make your own theme with your own dijitMenu and dijitMenuItem. You don't need to override the ComboBox? inline like that.