Sencha Touch checkboxfield hat funky layout mit langen label

Ich habe lange Bezeichnungen für ein paar checkboxfields in meiner app, und leider verursacht es ein seltsames Verhalten.

Gibt es eine Möglichkeit, um diesen look ein wenig besser? Ich meine, wenn ich "touch" in den grauen Bereich, wird die checkbox nicht aktivieren (auch, wenn das Kontrollkästchen im grauen Bereich)... aber statt dessen habe ich auf die weiße Fläche. Es ist nur ein bisschen verwirrend.

Auch wenn ich labelWidth: '80%' jedem checkboxfield die Worte noch wickeln und zu zeigen, dass wenig Grauzone. Ich würde lieber in diesem Bereich werden alle weiß und alle es "Anfassen", um aktivieren Sie das Kontrollkästchen.

InformationsquelleAutor Chase Florell | 2011-06-09

checkbox sencha-touch

5

Ich habe eine gleiche problem, ich fand 3 Möglichkeiten, es zu beheben, wählen Sie die beste Möglichkeit für Sie, ich benutze die 3. version. Sorry mein Englisch ist nicht das beste, ich hoffe, es wird verständlich sein 🙁

1. Lösung:
Sie können fügen Sie benutzerdefinierte css-Eintrag. Es wird das problem zu beheben, aber wenn Sie das Thema ändern, es könnte falsch sein.
```
.x-form-field-container {
    background: white;
}
```
2. Lösung:
Sie können überlauf versteckt, aber in diesem Fall wird der text am Ende abgeschnitten.
```
.x-form-label {
    overflow: hidden;
}

.x-form-label span
{
    white-space: nowrap;
}
```
3. Lösung:

Können Sie Ihr Etikett mit 100% Breite vor dem Feld. In diesem Fall wird das Eingabefeld Breite wird 100% zu.
```
new Ext.form.FormPanel({
    title: 'Form name',
    scroll: 'vertical',
    items: [{
        xtype: 'fieldset',
        title: 'Fieldset title',
        items: [{
            xtype: 'field',
            html: '<div class="x-form-label" style="width:100%"><span>This is the label of the field in below</span></div>'
        },{
            xtype: 'selectfield',
            name: 'nameOfTheField'
            //without label attribute
        }]
    }]
});
```
BEARBEITEN

_{durch rockinthesixstring}

Hier ist die änderung, die ich machte, um die gleichen Ergebnisse zu erzielen.

CSS
```
.x-checkbox{ background:white;}
```
JS
```
{
    xtype: 'checkboxfield',
    name: 'updateinfo',
    label: 'Update my info',
    labelWidth: '80%',
    cls: "x-checkbox"
}
```
- Du führst mich auf dem richtigen Weg. Ich habe aktualisiert Ihre Antwort zu zeigen, dass meine "Modifikation"
- interessanterweise, nur die Einstellung .x-input-checkbox{background: white;} hat nicht funktioniert
- die erste Lösung und labelwidth funktioniert perfekt
InformationsquelleAutor Qpi

Das problem in der Einstellung der hintergrund ist, dass Sie nur die Behebung dieses auf der Anzeige-Ebene. Funktional, das input-element wird immer noch die kleine Höhe. So dass wir wirklich brauchen, zu dehnen die Höhe des input-Elements.

Hier ist das Update, das die Arbeit in meinem Fall.
Hinzufügen von css-Stilen:

.x-form-label span {
    word-wrap: break-word; /*to avoid words that exceed length of the label*/
}

.x-input {
    /*
      the fix was working even without this, 
      but I'm leaving it here for more stability
    */
    position: relative;
}
.x-input input {
    /*basically, the main 4 magic lines of the fix*/
    position: absolute;
    height:100%;
    width: 70%;    
    right: 0;

    /*for more reliability*/
    top: 0;
    bottom: 0;
}

Zuweisen "x-input" - Klasse auf das element Sencha app, wie folgt:

new Ext.form.Radio({
    name: 'yourname',
    value: 'yourvalue',
    label: 'yourlabel',
    cls: 'x-input'
});

InformationsquelleAutor WallTearer

1

Keiner dieser Antworten macht eigentlich den gesamten vertikalen Platz des Kontrollkästchen-Bereich anklickbar. Was Sie tun müssen, ist, um eine Feste Höhe für den mit div und 100% Höhe für alle seine Kinder (oh, gut, wenn Sie wollen zu Graben, und es nur um die divs, die Sie benötigen, können Sie das auch tun, aber der faule Weg, funktioniert gut). Hier ist, was ich meine:

JS
```
{
    xtype: 'checkboxfield',
    id: 'YourIdHere',
    name : 'YourNameHere',
    label: 'Your Checkbox Label Here'
}
```
CSS
```
#YourIdHere {
    max-height: 50px !important;
    height: 50px !important;
}
#YourIdHere div {
    height:100% !important;
}
```
Natürlich, dies wird nicht dynamisch ändern Sie die Höhe des Etiketts + checkbox, wenn Sie irgendwie wollen, dass. So ist es keine vollständige Lösung, aber ich würde Wetten, es wird passen, was Sie wollen in den meisten Fällen. Der Grund warum dies funktioniert ist, weil die child-DIVs übernimmt 100% der Höhe Ihrer übergeordneten DIVs, wenn einer Ihrer Eltern unbekannter Höhe. Sie haben, um sicherzustellen, dass alle DIVs haben eine Höhe von entweder den KÖRPER hinab, oder ein DIV mit einer festen Höhe auf unten.

InformationsquelleAutor Dan Overlander
0

Wenn ich stieß auf dieses Problem, mit dem ich eine Feste Breite (in Pixel) und eine Feste labelWidth (Pixel). In der Regel nur die Anpassung der Etikettenbreite arbeitete für mich aber. Versuchen Sie es mit einer festen Breite, statt Prozent.
- problem mit fester Breite ist, dass es nicht flüssig ist, wenn ein Benutzer dreht das Telefon.
InformationsquelleAutor stan229

Können Sie auch hinzufügen, Stil in dem element selbst

defaults: {
                    xtype: 'textfield',
                    required: true,
                    useClearIcon: true,
                    autoCapitalize: false,
                    style: 'font-size: 0.8em; background: white;',
                },

InformationsquelleAutor Maanas Royy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

BEARBEITEN