Wie ändert man die xPage Combobox Drop-down-Pfeil Hintergrundfarbe?

Combobox Pfeil sieht gut in Chrome und IE, aber nicht gut in FF. Hier ist meine einfache Xpage:Wie ändert man die xPage Combobox Drop-down-Pfeil Hintergrundfarbe?

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 

<xp:comboBox id="inputComboBoxSearch" defaultValue="0" value="0" 
    style="height:60px; width:120px; text-align:right; box-shadow:none; border-radius:0; display:inline;"> 
     <xp:selectItem itemLabel="Search by" itemValue="0"></xp:selectItem> 
     <xp:selectItem itemLabel="User" itemValue="1"></xp:selectItem> 
     <xp:selectItem itemLabel="Date" itemValue="2"></xp:selectItem> 
     <xp:selectItem itemLabel="City" itemValue="3"></xp:selectItem> 
    </xp:comboBox> 
</xp:view> 

And here is how it look like in different browsers. How to change FF style so it is same as on Chrome?

Quelle

2017-02-12 John Glabb

Das Problem scheint mit der Grenze Eigentum. Siehe this codepen. XPage-Kombinationsfelder erben eine Grenze Eigenschaft über eine ".lotusForm Select" -Css-Stil-Anwendung von core.css. Die einzige Möglichkeit, dies zu vermeiden, war, die createForm -Eigenschaft in XPage auf falseAND zu setzen, um Theming auf der Combobox zu deaktivieren, indem disableTheme auf true gesetzt wird.

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
    createForm="false"> 


    <xp:comboBox id="inputComboBoxSearch" defaultValue="0" value="0" 
     style="height:60px; width:120px; text-align:right; display:inline; " 
     disableTheme="true" > 
     <xp:selectItem itemLabel="Search by" itemValue="0"></xp:selectItem> 
     <xp:selectItem itemLabel="User" itemValue="1"></xp:selectItem> 
     <xp:selectItem itemLabel="Date" itemValue="2"></xp:selectItem> 
     <xp:selectItem itemLabel="City" itemValue="3"></xp:selectItem> 
    </xp:comboBox> 

</xp:view>

Quelle

2017-02-12 17:20:32

Funktioniert immer noch nicht. Das Drop-down sieht in FF seltsam aus ... .In App Eigenschaften muss ich anpassen? –

@John, es funktioniert für Ihren Firefox 45.7.0 und das Thema "Bootstrap3", wenn Sie 'border-radius: 0;' aus dem Stil löschen. Sie müssen 'createForm =" false "' nicht setzen. Es genügt, nur 'disableTheme = "true" 'hinzuzufügen. Also, @Simon, deine Lösung ist für Johns Fall der bessere :) –

Simons Beispiel funktioniert nicht. Hast du es mit Bootstrap3 Theme in der Anwendung aktiviert versucht? –

Fügen Sie Ihrer XP: ComboBox styleClass="" hinzu. Dann ist der graue Hintergrund des Pfeils in Firefox verschwunden.

Wenn Sie Ihre Combobox in allen Browsern gleich aussehen möchten, verwenden Sie Dojo und fügen Sie stattdessen dojoType="dijit/form/Select" hinzu.

<xp:comboBox 
    id="inputComboBoxSearch" 
    defaultValue="0" 
    value="0" 
    style="height:60px; width:120px;" 
    dojoType="dijit/form/Select">

Quelle

2017-02-12 19:47:02

Das Hinzufügen von styleClass = "" zu meinem obigen Beispiel hilft nicht bei FF. dojoType = "dijit/form/Select" bricht nur alles in style = "... –

Welches Thema verwenden Sie? Es funktionierte für mich mit Thema" Plattform Standard "und" Webstandard "und FF Version 51. –

Einstellung styleClass = "" arbeitete auch für mich auf FF 51.0.1, Dom 9.0.1FP7 und es ist viel besser als meine Lösung. –

Hier ist die Lösung. Keine Notwendigkeit, Thema zu deaktivieren oder Formularparameter zu erstellen. Funktioniert mit Bootstrap3 Thema ...

height:60px; 
width:120px; 
display:inline; 
background:url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat; 
-webkit-appearance:none; 
-moz-appearance:none; 
background-position: 95px 20px;

Quelle

2017-02-16 16:32:07

Wie ändert man die xPage Combobox Drop-down-Pfeil Hintergrundfarbe?

Antwort

Verwandte Themen