Change proportion of label width to field content in field editor

Questions
1

I know this question has been asked and answered before, but the solution that I’ve come up is only half working.

I was able to get the CSS settings I wanted in real-time using the developer console, but the custom css class is losing out when displaying the field editor from the saved Skuid page.

Here is the custom class

.bidValues .nx-basicfieldeditor-item-label {
    width: 60%;
}
.bidValues .nx-field {
    width: 40%;
    text-align: right;
}

The 60% label width is working. But the .nx-field width is still 60% as well, causing it to wrap.

Here is a screenshot of the developer console showing the 40% setting being ignored/superseded:

2

I’ve had to use !important after my value in CSS to not get overridden by the Skuid theme. You will get an alert, in the CSS editor, but it’s worked for me when nothing else has.

3

Thanks Sean, that did it.

4

Not sure if it will help anyone, but I managed to brute force this, by giving the field my own CSS name AND overwriting the existing CSS. Messy, but it worked:

}.bidValuesLB .nx-basicfieldeditor-item-label {
    width: 20% !important;
    text-align:left;
}
.bidValuesLB .nx-field {
    width: 80%;
    text-align: left !important;
}
div.nx-basicfieldeditor-section-body>div.nx-basicfieldeditor-item>.nx-field, div.nx-basicfieldeditor-item>.nx-field {
    width: 80% !important;
    margin: 4px 0 3px 0;
}
.nx-field {
    width: 80%;
    margin: 4px 0 3px 0;
}