Change proportion of label width to field content in field editor

  • 1
  • Question
  • Updated 2 years ago
  • Answered
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:

Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Sean

Sean

  • 630 Points 500 badge 2x thumb
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.
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
Thanks Sean, that did it.
Photo of Laura Burnett

Laura Burnett

  • 588 Points 500 badge 2x thumb
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;
}