2

css für Datenfelder

date_css.ninox

Im englischen Forum wurde mal die Möglichkeit diskutiert, Datenfelder durch css zu formatieren. Für zwei praktische Möglichkeiten habe ich mal experimentiert. Die Einstellungen zum Feldnamen sind in beiden Fällen auf placeholder gestellt. Die Formatierung ist natürlich nur in der Formularansicht vorhanden. Die Funktionsfelder können in den Einstellungen auf transparent für Hintergrund und Schriftfarbe eingestellt werden und sind damit unsichtbar - im Beispiel habe ich darauf verzichtet.

A. ein Datumfeld mit abhängiger Farbe: kleiner today() rot, ab today() grün, placeholder center, Schrift und Schriftgröße verändert

B. ein Zahlenfeld, welches ohne Wert rot angezeigt wird, deutlicher als der kleine rote Rahmen, den Ninox anzeigt

Mirko

 

5 Antworten

null
    • thombeck
    • vor 8 MonatenFri, October 18, 2024 at 9:22 AM UTC
    • Gemeldet - anzeigen

    Hallo Mirko,

    absolutely super, habe ich schon lange vermisst! Muss man das css noch irgendwo einbinden, bei mir färbt sich noch nichts?

    Herzlichen Gruß,

    Thomas

      • mirko3
      • vor 8 MonatenFri, October 18, 2024 at 10:15 AM UTC
      • Gemeldet - anzeigen

      Das CSS muss nur in ein Funktionsfeld im Formular, in der gleichen Registrierkarte - unsichtbar machen! Mit folgendem Code müsste es bei Dir auch gehen - es werden aber alle Datumfelder formatiert.

      In der Beispieldatei sind die Formatierungen auf einzelne Datumfelder begrenzt durch die Bezeichnung ...:nth-child(3). Damit wird das 3. Feld in der Registrierkarte angesprochen. Wenn Du weitere CSS-Dateien aktiviert hast, dann können diese sich gegenseitig stören. Mirko

      let textcolor := if Datum < today() then "firebrick" else "darkslategray" end;
let bordercolor := if Datum < today() then "firebrick" else "darkolivegreen" end;
html("
<style>
.component.editor.editor-date{
    font-family:didot;
    border-radius:.9em;
    border:.3em outset " +
bordercolor +
";
    background-color: floralwhite;
    text-align:center;
    font-size:22px;
    color:" +
textcolor +
";
    }
.component.editor.editor-date .nx-input{
    background-color: floralwhite;
    border:thin solid floralwhite;
    }
.component.editor.editor-date .nx-input:hover{
    cursor:pointer;
}
.component.editor.editor-date .nx-input__input{
    background-color:floralwhite;
    text-align:center;
}
.component.editor.editor-date .nx-input--placeholder{
    color:darkolivegreen;
    background-color:floralwhite;
    font-size:22px;
    text-align:center;
}
</style>
  ")
      • thombeck
      • vor 8 MonatenFri, October 18, 2024 at 10:00 PM UTC
      • Gemeldet - anzeigen

       Perfekt, vielen Dank! Ich war schon dazu übergegangen, alle Datenfelder zu verstecken und durch richtig hervorhebbare Funktionsfelder zu ersetzen.

      • thombeck
      • vor 8 MonatenFri, October 18, 2024 at 10:13 PM UTC
      • Gemeldet - anzeigen

       ...  es geht auch mit Terminfeldern (appointment)

    • Michi.1
    • vor 8 MonatenTue, October 22, 2024 at 12:12 PM UTC
    • Gemeldet - anzeigen

    Wer noch das Ninox Label mittig haben möcht:

     

    html("
  <style>
    label{
width:100%;
text-align:center;
   }
  </style>
")
Anmelden, um zu antworten

Content aside

  • 2 „Gefällt mir“ Klicks
  • vor 8 MonatenTue, October 22, 2024 at 12:12 PM UTCZuletzt aktiv
  • 5Antworten
  • 158Ansichten
  • 3 Folge bereits