Setting attributes
As you must have wondered, setting attributes requires much more consideration than simply mapping them to an element. In this example, called ch04_setattributes
, we will create a form with the existing attributes. In the form, the user will be able to change the attribute values, add new ones to the feature, and remove them. We will extend the previous example to achieve our goal.
Styling the form
Our form can have multiple possible layouts. A row with attributes will surely contain the attribute name, the attribute value, and a remove button. However, depending on the attribute's state, the name can be a span
or a text input
element. Besides the rows, the form will have the add
and save
buttons. As we will create a new div
element for every row, we can create some simple CSS logic for these different cases:
.popup span { display: inline-block; width: 5%; } .popup span:first-child { float: left; width: 40%; } .popup input[type=text] { width: 50%; ...