Enable Versioning Behavior

Oct 13, 2025 by magicalceylontours.com 12 views

ChangeNote Input UI Field Not Showing Up in Edit View When Versioning Behaviour is Active on Content Type Due to CSS "display: none;" #6105

Introduction In this article, we will discuss a bug in the Volto Light Theme related to the changeNote input UI field not showing up in the edit view when versioning behavior is active on a content type. This issue is a result of CSS "display: none;" being applied to the field wrapper. We will go through the steps to reproduce the behavior, the expected behavior, and the possible solutions to this problem.

Describe the Bug The changeNote input field is not visible when editing content and versioning behavior is active on that object. The changeNote is intended to keep track of the purpose of changes over time and is displayed in the workflow history of the object in the same column with the state change note.

To Reproduce Steps to reproduce the behavior:

Enable Versioning Behavior: Go to 'site setup' and enable behavior "Versioning" for e.g. the content type page if not already active.
Create a New Page or Edit an Existing Page: Create a new page or click on the 'Edit Icon' (Pencil) of an existing page.
No Input Field Visible: There is no input field for the changeNote visible.
Inspect HTML Code: Enter Dom inspector and navigate to the HTML code at the end of the preview image text elements (it is in the <div id="metadataform-fieldset-default">).
Find the Full Structure: You find the full structure of the changeNote input field, including the label, input field, and help text.

<div class="inline field help text field-wrapper-changeNote">
    <div class="ui grid">
        <div class="stretched row">
            <div class="four wide column">
                <div class="wrapper"><label id="fieldset-default-field-label-changeNote" for="field-changeNote">Change Note</label></div>
            </div>
            <div class="eight wide column">
                <div class="ui input"><input id="field-changeNote" name="changeNote" type="text" value=""></div>
            </div>
        </div>
        <div class="stretched row">
            <div class="stretched twelve wide column">
                <p class="help">Enter a comment that describes the changes you made.</p>
            </div>
        </div>
    </div>
</div>

Inspect CSS: When you inspect the CSS, you find:

.field-wrapper-changeNote {
    display: none;
}

Expected Behavior The input field should be visible, and the input should be visible in the history after a save.

Possible Solutions To fix this issue, we need to remove the CSS rule that sets display: none; for the field-wrapper-changeNote class. We can do this by modifying the _content.scss file in the Volto Light Theme package.

Modify _content.scss File Open the _content.scss file in the Volto Light Theme package and remove the following line:

.field-wrapper-changeNote {
    display: none;
}

Commit Changes Commit the changes to the _content.scss file and push the changes to the repository.

Verify Changes Verify that the changeNote input field is now visible when editing content and versioning behavior is active on that object.

Conclusion In this article, we discussed a bug in the Volto Light Theme related to the changeNote input UI field not showing up in the edit view when versioning behavior is active on a content type. We went through the steps to reproduce the behavior, the expected behavior, and the possible solutions to this problem. By modifying the _content.scss file and removing the CSS rule that sets display: none; for the field-wrapper-changeNote class, we can fix this issue and make the changeNote input field visible when editing content and versioning behavior is active on that object.
ChangeNote Input UI Field Not Showing Up in Edit View When Versioning Behaviour is Active on Content Type Due to CSS "display: none;" #6105 - Q&A

Introduction In our previous article, we discussed a bug in the Volto Light Theme related to the changeNote input UI field not showing up in the edit view when versioning behavior is active on a content type. In this article, we will provide a Q&A section to answer some common questions related to this issue.

Q: What is the changeNote input field? A: The changeNote input field is a UI element that allows users to enter a comment that describes the changes made to a content object. It is displayed in the workflow history of the object in the same column with the state change note.

Q: Why is the changeNote input field not visible when versioning behavior is active on a content type? A: The changeNote input field is not visible when versioning behavior is active on a content type because of a CSS rule that sets display: none; for the field-wrapper-changeNote class.

Q: How can I fix this issue? A: To fix this issue, you need to remove the CSS rule that sets display: none; for the field-wrapper-changeNote class. You can do this by modifying the _content.scss file in the Volto Light Theme package.

Q: Where can I find the _content.scss file? A: The _content.scss file is located in the Volto Light Theme package, specifically in the packages/volto-light-theme/src/theme/_content.scss file.

Q: What changes do I need to make to the _content.scss file? A: You need to remove the following line from the _content.scss file:

.field-wrapper-changeNote {
    display: none;
}

Q: How do I commit changes to the _content.scss file? A: To commit changes to the _content.scss file, you need to use a version control system such as Git. You can use the following commands to commit changes:

git add packages/volto-light-theme/src/theme/_content.scss
git commit -m "Fixed changeNote input field visibility issue"

Q: How do I verify that the changeNote input field is now visible? A: To verify that the changeNote input field is now visible, you need to go to the edit view of a content object and check if the input field is visible. You can also use the DOM inspector to verify that the display: none; CSS rule is no longer applied to the field-wrapper-changeNote class.

Q: What are the benefits of fixing this issue? A: Fixing this issue allows users to enter a comment that describes the changes made to a content object, which can be useful for tracking changes and understanding the history of a content object.

Conclusion In this Q&A article, we answered some common questions related to the changeNote input UI field not showing up in the edit view when versioning behavior is active on a content type. We provided step-by-step instructions on how to fix this issue and verify that the changeNote input field is now visible.