Working with dynamic HTML elements

element for the darkened background behind the modal box.

Selecting dynamic elements

Dynamic elements have orange highlight border when the mouse pointer moves over them.

Select the element by clicking on it in the page view.

Dynamic elements have orange border and menu. This helps to distinguish them from the static elements.

Displaying dynamic elements in the Tree panel

The Tree panel only shows static HTML elements, as they are structured in the document source code. Click on the Code icon to switch the source code mode off and instead display the current DOM structure as displayed in the browser.

Once we do that, we can click on the .modal-backdrop element in the tree to select it.

Difference between static and dynamic elements

Dynamic elements are created by Javascript code, they don’t exist in the HTML source code.

That means that we can’t save edited dynamic elements to the HTML source code – they were never there in the first place.

The only way to change dynamic elements is through editing the Javascript code that created them.

That’s why only the following editing features are available on dynamic elements:

• Editing the textual content with inline text editing
• Editing classes and attributes
• Editing inline style

Although these changes can’t be saved, they can be used for prototyping or to support the task of styling the element.

Styling dynamic elements

The main purpose of selecting dynamic elements is to edit their CSS styling in the Style panel.

CSS styles are usually saved in separate stylesheets, so any changes we do there can be saved back to the CSS sources.

The only limitation are inline styles, encoded in the style attribute of the element. That means that inline styles can’t be saved.

You can edit inline style of dynamic elements. Pinegrow will display a warning when you do.

But then, if you want to keep such styles, you have to save them into a proper CSS rule in one of the stylesheets: