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 Monaten
    • 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 Monaten
      • 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 Monaten
      • Gemeldet - anzeigen

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

      • thombeck
      • vor 8 Monaten
      • Gemeldet - anzeigen

       ...  es geht auch mit Terminfeldern (appointment)

    • Michi.1
    • vor 7 Monaten
    • 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 7 MonatenZuletzt aktiv
  • 5Antworten
  • 154Ansichten
  • 3 Folge bereits