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

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

      • thombeck
      • vor 10 Monaten
      • Gemeldet - anzeigen

       ...  es geht auch mit Terminfeldern (appointment)

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