CODEWITHSUNDEEP
dojoxpages
Cumhur Ata
Cumhur Ata

Reputation: 809

Changing size of Dojo Filtering Select via CSS in XPages

I just want to change the size of Dojo Filtering Select design element via CSS. I tried manual or CSS File. It did not work.

<xe:djFilteringSelect id="djselect1" value="#{document1.Language}" style="min-height: 8px;height:8.px;"></xe:djFilteringSelect> Dojo Filtering Select in red rectangle Any suggestion is important
Cumhur Ata

Dojo Filtering Select Menu

Upvotes: 1

Views: 174

Answers (2)

Knut Herrmann
Knut Herrmann

Reputation: 30960

As you are using Bootstrap theme you need to adjust the arrow button too.

This works for me:

.dbootstrap .dijitTextBox {
    height: 24px;
}
.dbootstrap .dijitComboBox .dijitButtonNode.dijitArrowButton {
    height: 22px;
}
.xsp.dbootstrap .dijitInputContainer {
    padding-top: 0px;
}
.dbootstrap .dijitComboBox input.dijitArrowButtonInner {
    margin-top: -3px;
    margin-left: -5px;
}
.dbootstrap .dijitMenuItem {
    padding: 0px 10px;
}

Upvotes: 2

Per Henrik Lausten
Per Henrik Lausten

Reputation: 21709

You just need to override the dijitTextBox CSS class.

You might need to use CSS specificity to make sure that the CSS is picked up (instead of using !important).

Here's a simple example:

.dijitTextBox {
    width: 40px;
    height: 8px;
}

Upvotes: 3

Related Questions