CODEWITHSUNDEEP
htmlcssdojo
nishan
nishan

Reputation: 21

How to set width of a Dojo Combobox

how do I control width of a dojo combobox using css, i tried #comboId{width:50px} where comboId is the Id of <select id="comboId">. but it does not work

Upvotes: 2

Views: 9708

Answers (4)

Jithil P Ponnan
Jithil P Ponnan

Reputation: 1247

It could be done by calling the function "forceWidth(true)", and define the class .mblComboBoxMenu with desired height in your css file.

for example:

.mblComboBoxMenu {
    position: relative;
    overflow-y: hidden !important;
    overflow: hidden;
    border: 1px solid #00677f;
    border-radius: 0;
    background-color: white;
    color: #868e96;
    width: 80% !important; 
}

Upvotes: 0

Matej
Matej

Reputation: 942

Setting width using css did not work for me. However, setting style at construction did:

var spatialQueryComboBox = new ComboBox({
            id: "selectionType",
            style:{width: "100px"},
            store: spatialSelectionStore,
            searchAttr: "name"
        }, "spatialSelectionType");

Upvotes: 3

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

ComboBox is a little tricky, because the way this widget works, the node with the id comboId will end up being the inner input node inside the widget, not the widget's top-level domNode (which receives the id widget_comboId instead). This is probably why that's having no effect for you.

Note that not nearly all widgets do funny things like this, but namely widgets like dijit.form.TextBox and dijit.form.ComboBox (and widgets that extend them) do.

Perhaps the simplest way around this would be to also add a class to your widget and style based on that instead (which is generally encouraged as it is more reusable than coupling specific IDs into your css anyway). Assuming you're instantiating declaratively:

<select id="comboId" class="comboClass" dojoType="dijit.form.ComboBox">
    ...
</select>

Then in your css:

.comboClass { width: 50px; }

Other solutions

If you're instantiating this widget declaratively, you can apply the style inline and it will become properly mapped to the widget's domNode automatically:

<select id="comboId" dojoType="dijit.form.ComboBox" style="width: 50px">
    ...
</select>

Alternatively, you can set the style attribute of the widget after it is instantiated:

dijit.byId('comboId').set('style', {width: '50px'});

This is programmatically the equivalent to setting the width style inline on the DOM node declaratively.

Upvotes: 5

Zakaria
Zakaria

Reputation: 15070

Did you try:

dojo.style("comboId", "width", "50px");

Upvotes: 0

Related Questions