.nx-basicfieldeditor-item property

  • 1
  • Question
  • Updated 4 years ago
So we can see the css value for the field editor label and item. Problem is that the label is 40% and the item is 60%, so for a checkbox that is sort of backwards. We want to change the label to like 70% and the item to 30% so the label does not wrap. 
So to add a new CSS resource to reference on the field, what would the css be?
Thanks in advance.
Photo of Ben


  • 780 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Ben


  • 780 Points 500 badge 2x thumb
This is what we need to replace in custom CSS
div.nx-basicfieldeditor-item>.nx-field, div.nx-basicfieldeditor-section-body>div.nx-basicfieldeditor-item>.nx-field {
 width: 60%;
 margin: 4px 0 3px;
Not quite sure what the syntax would be.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,828 Points 20k badge 2x thumb
CSS selectors.  They are difficult.  Here is what you need to do: 

1. Add a CSS Class to your Field Properties.  I used "FatName" 

2.  Add CSS code that is tied to that FatName class (and to the selectors you referenced above)

Code would look like this: 

.nx-basicfieldeditor-item.FatName .nx-basicfieldeditor-item-label {
width: 70%;

.nx-basicfieldeditor-section-body > .nx-basicfieldeditor-item.FatName > .nx-field
width: 30%;

Then check out your work.  That field should be offset from the others in the column. 

Hope that works for you.... 
Photo of Anna Wiersema

Anna Wiersema, Alum

  • 10,920 Points 10k badge 2x thumb
wait - File Upload is a field type!?!  #MindBlown