Protostar: CSS-Regel wird nicht angewendet, wenn davor ein Input-Element auf selber Ebene steht

    Hallo allerseits,


    Nach langer "Joomla-Abstinenz" bin ich wieder über etwas gestolpert, ich hoffe, ich kann es einigermaßen beschreiben:


    Es gibt ja diese "Button Groups". Im Frontend (Protostar) ist mir aufgefallen, dass die Schaltflächen im Gegensatz zum Backend (Isis) nicht "aneinander kleben". Das sieht, wenn man z. B. ein Modul im Frontend bearbeitet, so aus:



    Es sollte aber (gemäß Backend Isis) wie folgt aussehen:



    Meiner Meinung nach liegt das Problem in dieser CSS-Regel von Protostar ("templates/protostar/css/template.css"):


    Code
    .btn-group > .btn + .btn {
    margin-left: -1px;
}


    Der entsprechende HTML-Block im Browser ist:

    Code
    <fieldset id="jform_published" class="btn-group radio">
    <input type="radio" id="jform_published0" name="jform[published]" value="1" checked="checked">
    <label for="jform_published0" class="btn active btn-success">Veröffentlicht</label>
    <input type="radio" id="jform_published1" name="jform[published]" value="0">
    <label for="jform_published1" class="btn">Versteckt</label>
    <input type="radio" id="jform_published2" name="jform[published]" value="-2">
    <label for="jform_published2" class="btn">Papierkorb</label>
</fieldset>


    Diese Regel kann also nur funktionieren, wenn die Input-Elemente nicht existieren.


    Daher habe ich das wie folgt geändert ("templates/protostar/css/template.css"):


    Code
    .btn-group > .btn + .btn,
.btn-group > .btn + input + .btn {
    margin-left: -1px;
}


    Dasselbe ist wahrscheinlich in "media/jui/css/bootstrap.css" zu machen.


    In "media/jui/less/button-groups.less" müsste man folgenden Code

    Code
    .btn-group > .btn + .btn {
  margin-left: -1px;
}


    ändern in


    Code
    .btn-group > .btn {
  + .btn,
  + input + .btn {
    margin-left: -1px;
  }
}


    Das ist aber nur mal eine Annahme von mir, daher hätte ich gern die Meinung von euch Experten hier. :)


    Sonnige Grüße aus Wien sendet euch


    Gerry77

    Ich meinte, ob das die einzige CSS-Regel in Protostar ist, die einer solchen Änderung bedarf. Ich könnte mir vorstellen, nein, aber dazu kenne ich Protostar nicht gut genug.


    LG, Gerry77

    Ich bin gerade auf eine viel bessere Lösung gekommen: Einfach den Selektor "+" mit "~" ersetzen.


    Seht ihr das genauso?


    LG, Gerry77

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von Gerry77 mit diesem Beitrag zusammengefügt.

    Zitat von Lui_brempt

    Eine Änderung in Protostar dürfte keine Auswirkungen auf andere Templates auch nicht auf Backend-Templates haben.


    Das habe ich nicht gemeint. Ich gehe davon aus, dass es sich um einen Fehler in den genannten Dateien handelt, die auf Protostar einen Einfluss haben. Dazu gehören "templates/protostar/css/template.css" aber auch "media/jui/css/bootstrap.css" und "media/jui/less/button-groups.less", weil die beim Bilden des CSS von Protostar offenbar eine Rolle spielen.


    LG, Gerry77

    Hallo,

    Zitat von Gerry77

    Daher habe ich das wie folgt geändert ("templates/protostar/css/template.css"):

    Code
    .btn-group > .btn + .btn,
.btn-group > .btn + input + .btn {
    margin-left: -1px;
}

    Hab das ganz einfach in die user.css gegeben. Ergebnis:



    Ev. "Auswirkungen" oder andere Bereiche, habe ich nicht ausprobiert.

    Zitat von Gerry77

    Dasselbe ist wahrscheinlich in "media/jui/css/bootstrap.css" zu machen.

    Nö, auch nicht die andere CSS ( ... less), die Du angibst. Es sei denn, es gäbe dafür einen Issue, wo das ev. geändert gehört.


    Liebe Grüße

    Christine

    Hallo Christine,


    Vielen Dank für Deine Antwort. Ich hatte den Eindruck, dass die Entwickler beim Bilden des Protostar-CSS ("template.css") die "bootstrap.css" und/oder "button-groups.less" berücksichtigen, daher der Hinweis auf diese Dateien.


    Es bleibt immer noch die Frage, ob die Entwickler das ändern sollen oder nicht. Meiner Meinung nach, ja, denn im Backend sieht es korrekt aus.


    LG, Gerry77