Change Default With of Field editor labels

  • 1
  • Question
  • Updated 1 year ago
  • Answered
  • (Edited)
By default the basicfieldeditor as a label width of 40% and field of 60%

div.nx-basicfieldeditor-item>.nx-field, div.nx-basicfieldeditor-section-body>div.nx-basicfieldeditor-item>.nx-field {
width: 60%;
margin: 4px 0 3px;
}

During the inspection of the element this is what I see, and need this to be 40% not 60. Simply cutting and pasting the above into custom CSS does not work. Having a brain freeze so if someone can assist, that would be great.

Thanks in advance.
Photo of Ben

Ben

  • 780 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Hi Ben,

just trimming down the css to the '.nx-field' property should work. Try this instead:

.nx-field {
   width: 60%;
}

The one above will apply it to every '.nx-field' component on the page. If you want to do it just within a single field editor, then apply a unique id to that field editor, e.g. customWidth, and then do:

#customWidth .nx-field {
   width: 60%;
}
Photo of Ben

Ben

  • 780 Points 500 badge 2x thumb
Not sure how my email address got put into the subject field of this, but if someone at SKUID could fix that would be ideal.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
I changed the subject of this post.
Photo of ErickMolina

ErickMolina

  • 204 Points 100 badge 2x thumb
This does not work for me. I'm not sure what I could be doing wrong.
https://www.screencast.com/t/gqkXK8g3
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
see if adding a space before !important works, ie

width: 40% !important;
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
just checked and that may not help. I've tried a couple of different properties and .nx-field doesn't seem to respond. These ones do however:

.nx-fieldtext {
    width: 10%;
}

.nx-basicfieldeditor-item {
    width: 10%;
}

.nx-basicfieldeditor-item-label {
    width: 10%;
}