1

Field labels in RED color

Hi,

Just wanted to find out if it was possible to make the labels of the fields in RED color for all required fields in a table. eg: In the Sales Order table, I want the 'Sale Order Date' label to be in RED color to signify that it is a required field on the form.

Thanks,

Vermaji

--------------------------------

50 replies

null
    • Sean
    • 3 mths ago
    • Reported - view

    Here is a list of classes for the different field types

    Text                                          .component.editor.editor-string
    Text(multiline)                        .component.editor.editor-string
    Rich text                                  .component.editor.editor-html
    Number                                   .component.editor.editor-number
    Yes/No                                     .component.editor.editor-boolean
    Choice                                     .component.editor.editor-choice
    Multiple choice                      .component.editor.editor-multi
    Date                                         .component.editor.editor-date
    Time                                         .component.editor.editor-time
    Appointment                          .component.editor.editor-appointment
    Color                                        .component.editor.editor-color
    Choice (dynamic)                   .component.editor.editor-dchoice
    Multiple choice (dynamic)    .component.editor.editor-dmulti

      • szormpas
      • 3 mths ago
      • Reported - view

       thanks, the .nx-input__input is working inconsistently in my setup, but the code below is giving me the best results:

      html("
          <style>
              .nx-input {
                  color: yellow;
                  background-color: red;
              }
              .component.editor.editor-string input {
                  color: yellow;
                  background-color: red;
              }
          </style>
      ")
      
      • red_kite
      • 3 mths ago
      • Reported - view

       Thank you for sharing your knowledge. I have a question. The field label in Ninox can be set to "placeholder". Do you know how it could be addressed in CSS? I have try versions like:

      .component.editor.editor-string label placeholder{
          text-align:center;
      }
      .component.editor.editor-string placeholder{
          text-align:center;
      }
      .component.editor.editor-string label_placeholder{
          text-align:center;
      }
      .component.editor.editor-string label.placeholder{
          text-align:center;
      }
      

      But nothin works. Greetings and have a nice weekend. MZ

      • Sean
      • 3 mths ago
      • Reported - view

       Happy to help when I can. The following works:

          .nx-input--placeholder {
              text-align: center;
          }
      

      Have a nice weekend as well.

      • red_kite
      • 3 mths ago
      • Reported - view

       Thank you so much. Now my format is perfect for my eyes;-)

    • Mel_Charles
    • 3 mths ago
    • Reported - view

    I read this thread with much interest and tried all the options above.

    I like the idea of setting a text input cell to colour base on Seans field "Required' Option. but also like  the idea of setting the cell colour as an infill as per Sotirios suggestion. This test showed that it affects all input cells. I would like this to this apply the infill but to just either the required cells or better still just one input filed of my choosing. Do this think this is doable?

    Ie in my orders form a product description text line (is required field) but after I input the data I would like it to stay highlight with the red and infill and yellow text (just this field!)

      • szormpas
      • 3 mths ago
      • Reported - view

        you are right, the above code is applied indiscriminately to all fields on the current page, even in the pop-up window of each field's formatting options. What you suggest is the next logical step and I hope Ninox listens to us so that they can officially include these features in one of their next releases!

      • Sean
      • 3 mths ago
      • Reported - view

       This is the only solution I can find right now

      html("
      <style>
          .form .component.editor.editor-string:nth-child(2) .nx-input,
          .form .component.editor.editor-string:nth-child(2) .nx-input__input {
              color: yellow;
              background-color: red;
          }
      </style>
      ")

      In this example it would style the second field on your form view. You would just need to change the number in nth-child() to the number of the field on your form.

      • Sean
      • 3 mths ago
      • Reported - view

       if you precede your class list with .form like my example for Mel, it will only affect the elements on your form and not other elements in the app's UI

      • Mel_Charles
      • 3 mths ago
      • Reported - view

       I like it - I can use this ! 🙂 i have set it to field 1

      Don't know anything about html/css

      So silly question would I repeat lines 3 to 6 if i wanted it to effect another text input as well ie field 1 and say field 6 - have tried it but it don't work - why would it? = I am just stabbing in the dark

      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      Works in this way, maybe there are best way.

      html("
      <style>
          .form .component.editor.editor-string:nth-child(2) .nx-input,
          .form .component.editor.editor-string:nth-child(2) .nx-input__input {
              color: black;
              background-color: orange;
          }
      </style>
      <style>
          .form .component.editor.editor-string:nth-child(3) .nx-input,
          .form .component.editor.editor-string:nth-child(3) .nx-input__input {
              color: black;
              background-color: orange;
          }
      </style>
      <style>
          .form .component.editor.editor-date:nth-child(6) .nx-input,
          .form .component.editor.editor-date:nth-child(6) .nx-input__input {
              color: white;
              background-color: green;
          }
      </style>
      ")
      • Sean
      • 3 mths ago
      • Reported - view

       Layout fields have to be counted as well. If you have Headers, Spaces, Line breaks, etc., they will need to be counted. By the way, much of my learning is by trial and error 😉

       

       you don't need separate style tags for each style. Additionally, you can combine tags if the same style will be used by multiple tags.

      html("
      <style>
          .component.editor.editor-string.error {
              background-color: lightgray;
          }
          .component.editor.editor-string.error label {
              color: red;
          }
          .component.editor.editor-date.error label {
              color: red;
          }
          .component.editor.editor-date.error {
              background-color: lightgray;
          }
          .form .component.editor.editor-string:nth-child(1) .nx-input,
          .form .component.editor.editor-string:nth-child(1) .nx-input__input,
          .form .component.editor.editor-string:nth-child(3) .nx-input,
          .form .component.editor.editor-string:nth-child(3) .nx-input__input {
              color: yellow;
              background-color: red;
          }
      </style>
      ")
      

      I used nth-child(1) and nth-child(3) because there is a Line break between Text and Text 2.

      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       Thanks again now when place the date  go to normal field

      • Sean
      • 3 mths ago
      • Reported - view

      would you please post your code and let me know what you are trying to achieve.

      • szormpas
      • 3 mths ago
      • Reported - view

        hi, also I like it. A practical way to give emphasis on one or more input fields. Thank you 👍

      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      html("
      <style>
          .component.editor.editor-string.error {
              background-color: lightgray;
          }
          .component.editor.editor-string.error label {
              color: black;
          }
          .component.editor.editor-date.error label {
              color: green;
          }
          .component.editor.editor-date.error {
              background-color: lightgray;
          }
          .form .component.editor.editor-string:nth-child(2) .nx-input,
          .form .component.editor.editor-string:nth-child(2) .nx-input__input,
          .form .component.editor.editor-string:nth-child(2) .nx-input,
          .form .component.editor.editor-string:nth-child(2) .nx-input__input {
              color: black;
              background-color: orange;
          }
      </style>
      ")
      
    • Sean
    • 3 mths ago
    • Reported - view
     said:
    now when place the date  go to normal field

    Do you want this to happen?

      • Mel_Charles
      • 3 mths ago
      • Reported - view

       @sean  Great work Guys !   

       I have yet to get to grips with html workings - can only do simple basics for my adverts ...

      Have a more pressing problem trying to learn to play Fats Waller "Handful of keys"
      but thats another story!  See here
      🤣🤣

    • Mel_Charles
    • 3 mths ago
    • Reported - view

    @sean

    I tried your code and set it for field 1 and 9 (both text fields) works like a charm!

    i then tried seeting the last 2 .form line to 2 (field 2 is a date field and nothing happened)

    I'm not quite understand the top section of the code l- look slike error hadnling for date and string errors but i don't understand how this applies/works in respetc of my filed 2 (date field) and what error would it be expecting?

     

    html("
    <style>
        .component.editor.editor-string.error {
            background-color: lightgray;
        }
        .component.editor.editor-string.error label {
            color: red;
        }
        .component.editor.editor-date.error label {
            color: red;
        }
        .component.editor.editor-date.error {
            background-color: lightgray;
        }
        .form .component.editor.editor-string:nth-child(1) .nx-input,
        .form .component.editor.editor-string:nth-child(1) .nx-input__input,
        .form .component.editor.editor-string:nth-child(2) .nx-input,
        .form .component.editor.editor-string:nth-child(2) .nx-input__input {
            color: yellow;
            background-color: red;
        }
    </style>
    ")
      • Sean
      • 3 mths ago
      • Reported - view

       This thread originally started with a request to change the colors for Required fields. If you don't need that then you can just delete those lines.

      Try this for the Date field

          .form .component.editor.editor-date:nth-child(2) .nx-input,
          .form .component.editor.editor-date:nth-child(2) .nx-input__input {
              color: white;
              background-color: green;
          }
      

      Change the number if you need to.

      • Mel_Charles
      • 3 mths ago
      • Reported - view

      ah now makes sense - cheers

      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      Can you place a screenshot please  

      • Mel_Charles
      • 3 mths ago
      • Reported - view

       This is just a test to prove the theory!

      so in @Sean's script i have

      .form .component.editor.editor-date:nth-child(1) .nx-input,
          .form .component.editor.editor-date:nth-child(8) .nx-input__input {
              color: yellow;
              background-color: red;
          }
      

      as you can see sean said you have to count the number of item elements on the form. in my second case it is 8 (8th item along)

      • Mel_Charles
      • 3 mths ago
      • Reported - view

       The colour is terrible but I chose to ensure it stand out for testing. and because i am colour blind if I had set it to  say cyan,  I would never know if it had worked or not 🤣🤣

      My system has some whacky colours and my colleagues hate me when I am testing !!!

      I wish Ninox would add some kind of "style" sheet control !!

      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      You can use hex color and choice a good color 

      • Mel_Charles
      • 3 mths ago
      • Reported - view

       I know mate.... just whilst i'm testing very bold colours help from a colour blind perspective - 🙂

Content aside

  • Status Answered
  • 1 Likes
  • 3 mths agoLast active
  • 50Replies
  • 292Views
  • 6 Following