The acf-divider-field from kreshnik

acf-divider-field's People

Contributors

Stargazers

Watchers

acf-divider-field's Issues

Conditional Logic

Any chance of adding this as an option?

Suggestion: CSS Changes to make field render more native.

Finding this very useful, but would prefer that it render more like native Wordpress UI. In addition, it doesn't align correctly when label placement is "Left Aligned".

My adjusted CSS is as follows:

/* Create a border above the field when editing the group. Idential to how Tabs works. */

    .acf-field-object + .acf-field-object-divider {
        margin-top: 6px;
    }
    .acf-field-object + .acf-field-object-divider:before {
        display: block;
        content: "";
        height: 1px;
        background: #F0F0F0;
        margin-top: -7px;
        width: 100%;
        position: absolute;
    }

/* Remove fields we don't need when editing this field. */

    .acf-field-list .acf-field-object-divider .handle ul li.li-field-name{
        visibility: hidden;
    }
    .acf-field-list .acf-field-object-divider tr[data-name="name"],
    .acf-field-list .acf-field-object-divider tr[data-name="instructions"],
    .acf-field-list .acf-field-object-divider tr[data-name="required"],
    .acf-field-list .acf-field-object-divider tr[data-name="wrapper"],
    .acf-field-list .acf-field-object-divider tr[data-name="conditional_logic"],
    .acf-field-list .acf-field-object-divider tr[data-name="warning"] {
        display: none !important;
    }


/* Basic field rendering changes. */

    .acf-field-divider .acf-label {
        display: none;
    }
    .acf-field-divider .acf-input {
        font-weight: bold;
        text-transform: uppercase;
    }
    .acf-fields > .acf-field-divider {
        padding: 2px 15px;
    }

/* Layout adjustments when Label Placement is "Left Aligned" */

    .acf-fields.-left > .acf-field-divider:before {
        display: none;
    }
    .acf-fields.-left > .acf-field-divider {
        padding: 2px 15px;
    }
    .acf-fields.-left > .acf-field-divider > .acf-input {
        padding-left: 0;
    }