Change Default With of Field editor labels

Questions
1

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.

2

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%;
}





3

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.

4

I changed the subject of this post.

5

This does not work for me. I’m not sure what I could be doing wrong.
https://www.screencast.com/t/gqkXK8g3

6

see if adding a space before !important works, ie

width: 40% !important;

7

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%;
}