Edit the display of labels and inputs within Field Editor

Questions
,
1

Some of the fields in the field editor are awkwardly wide and display horribly for good UI design. For example, the label of a field is not very close to the field itself when it’s displayed. I’d like to be able to align all of my labels to the right so that they are flush against their inputs. Also, I’d like to add a border only around the inputs and not the labels. Is any of this possible?

2

You can define a CSS class in the CSS panel on the upper left side of the page designer. Use In-Line for resource location for a single page’s css. (External and static allow you to define a more global class.)

The CSS Class field property on each field in the Field Editor may reference one of these defined classes.

Here are some examples from the XML of a page where I needed to tweak the field or label appearance.

    <css>
        <cssitem location="inline" name="longTextRight" cachelocation="false">
            .longTextRight .nx-basicfieldeditor-item-label
            {
                width: 17%;
                font-weight: bold;
            }
        </cssitem>
        <cssitem location="inline" name="longTextBelow" cachelocation="false">
            .longTextBelow .nx-basicfieldeditor-item-label
            {
                width: 17%;
                font-weight: bold;
                text-decoration: underline;
            }
        </cssitem>
        <cssitem location="inline" name="boldLabel" cachelocation="false">
            .nx-basicfieldeditor-item-label .nx-template
            {
                font-weight: bold;
            }
        </cssitem>
        <cssitem location="inline" name="centerUnderline" cachelocation="false">
            .centerUnderline .nx-basicfieldeditor-item-label
            {
                text-align: center;
                text-decoration: underline;
            }
        </cssitem>
        <cssitem location="inline" name="shortLabel" cachelocation="false">
            .shortLabel .nx-basicfieldeditor-item-label
            {
                width: 39%;
            }
        </cssitem>
        <cssitem location="inline" name="shortShortLabel" cachelocation="false">
            .shortShortLabel .nx-basicfieldeditor-item-label
            {
                width: 22%;
            }
        </cssitem>
    </css>

There may be better ways of doing this, especially on a global basis; I’d love to see other approaches!

3

Yes, this kind of thing is exactly what CSS is for.

If you want to apply changes globally, you can add custom CSS directly to a skuid theme.

You can play around with the CSS on any live webpage by right-clicking on the element you’re interested and clicking ‘Inspect.’