Added "cell-vertical-self-align", and "cell-horizontal-self-align" properties

CHANGELOG.md

@@ -1,6 +1,7 @@
 # v0.14.0
 * Added the ability to work without creating a WebSocket. Added NoSocket property of AppParams.
 * Added the ability to run a timer on the client side. Added StartTimer and StopTimer methods to Session interface.
+* Added "cell-vertical-self-align", and "cell-horizontal-self-align" properties 
 * Bug fixing
 
 # v0.13.x

README.md

@@ -2465,9 +2465,10 @@ The SizeUnit value of type SizeInFraction can be either integer or fractional.
 The "grid-row-gap" and "grid-column-gap" SizeUnit properties (GridRowGap and GridColumnGap constants) 
 allow you to set the distance between the rows and columns of the container, respectively. The default is 0px.
 
-### "cell-vertical-align" property
+### "cell-vertical-align" and "cell-vertical-self-align" properties
 
-The "cell-vertical-align" property (constant CellVerticalAlign) of type int sets the vertical alignment of children within the cell they are occupying. Valid values:
+The "cell-vertical-align" int property (constant CellVerticalAlign) sets the default vertical alignment of children 
+within the cell they are occupying. Valid values:
 
 | Value | Constant     | Name      | Alignment           |
 |:-----:|--------------|-----------|---------------------|
@@ -2478,9 +2479,13 @@ The "cell-vertical-align" property (constant CellVerticalAlign) of type int sets
 
 The default value is StretchAlign (3)
 
-### "cell-horizontal-align" property
+The "cell-vertical-self-align" int property (constant CellVerticalAlign) sets the vertical alignment of children 
+within the cell they are occupying. This property should be set not for the grid, but for the children.
 
-The "cell-horizontal-align" property (constant CellHorizontalAlign) of type int sets the horizontal alignment of children within the occupied cell. Valid values:
+### "cell-horizontal-align" and "cell-horizontal-self-align" properties
+
+The "cell-horizontal-align" int property (constant CellHorizontalSelfAlign) sets the horizontal alignment 
+of children within the occupied cell. Valid values:
 
 | Value | Constant     | Name      | Alignment          | 
 |:-----:|--------------|-----------|--------------------|
@@ -2491,6 +2496,9 @@ The "cell-horizontal-align" property (constant CellHorizontalAlign) of type int
 
 The default value is StretchAlign (3)
 
+The "cell-horizontal-self-align" int property (constant CellVerticalSelfAlign) sets the horizontal alignment of children 
+within the cell they are occupying. This property should be set not for the grid, but for the children.
+
 ## ColumnLayout
 
 ColumnLayout is a container that implements the ViewsContainer interface. 

app_styles.css

@@ -57,9 +57,10 @@ button {
 
 textarea {
   margin: 2px;
-  padding: 1px;
+  padding: 4px;
   overflow: auto;
   font-size: inherit;
+  resize: none;
 }
 
 ul:focus {

gridLayout.go

@@ -5,6 +5,44 @@ import (
 	"strings"
 )
 
+const (
+	// CellVerticalAlign is the constant for the "cell-vertical-align" property tag.
+	// The "cell-vertical-align" int property sets the default vertical alignment
+	// of GridLayout children within the cell they are occupying. Valid values:
+	// * TopAlign (0) / "top"
+	// * BottomAlign (1) / "bottom"
+	// * CenterAlign (2) / "center", and
+	// * StretchAlign (2) / "stretch"
+	CellVerticalAlign = "cell-vertical-align"
+
+	// CellHorizontalAlign is the constant for the "cell-horizontal-align" property tag.
+	// The "cell-horizontal-align" int property sets the default horizontal alignment
+	// of GridLayout children within the occupied cell. Valid values:
+	// * LeftAlign (0) / "left"
+	// * RightAlign (1) / "right"
+	// * CenterAlign (2) / "center"
+	// * StretchAlign (3) / "stretch"
+	CellHorizontalAlign = "cell-horizontal-align"
+
+	// CellVerticalSelfAlign is the constant for the "cell-vertical-self-align" property tag.
+	// The "cell-vertical-align" int property sets the vertical alignment of GridLayout children
+	// within the cell they are occupying. The property is set for the child view of GridLayout. Valid values:
+	// * TopAlign (0) / "top"
+	// * BottomAlign (1) / "bottom"
+	// * CenterAlign (2) / "center", and
+	// * StretchAlign (2) / "stretch"
+	CellVerticalSelfAlign = "cell-vertical-self-align"
+
+	// CellHorizontalSelfAlign is the constant for the "cell-horizontal-self-align" property tag.
+	// The "cell-horizontal-self align" int property sets the horizontal alignment of GridLayout children
+	// within the occupied cell. The property is set for the child view of GridLayout. Valid values:
+	// * LeftAlign (0) / "left"
+	// * RightAlign (1) / "right"
+	// * CenterAlign (2) / "center"
+	// * StretchAlign (3) / "stretch"
+	CellHorizontalSelfAlign = "cell-horizontal-self-align"
+)
+
 // GridLayout - grid-container of View
 type GridLayout interface {
 	ViewsContainer

propertyNames.go

@@ -666,7 +666,8 @@ const (
 
 	// Resize is the constant for the "resize" property tag.
 	// The "resize" int property sets whether an element is resizable, and if so, in which directions.
-	// Valid values are "none" (0), "both" (1), horizontal (2), and "vertical" (3)
+	// Valid values are "none" / NoneResize (0), "both" / BothResize (1),
+	// "horizontal" / HorizontalResize (2), and "vertical" / VerticalResize (3)
 	Resize = "resize"
 
 	// UserSelect is the constant for the "user-select" property tag.

propertySet.go

@@ -331,6 +331,16 @@ var enumProperties = map[string]struct {
 		"justify-items",
 		[]string{"start", "end", "center", "stretch"},
 	},
+	CellVerticalSelfAlign: {
+		[]string{"top", "bottom", "center", "stretch"},
+		"align-self",
+		[]string{"start", "end", "center", "stretch"},
+	},
+	CellHorizontalSelfAlign: {
+		[]string{"left", "right", "center", "stretch"},
+		"justify-self",
+		[]string{"start", "end", "center", "stretch"},
+	},
 	GridAutoFlow: {
 		[]string{"row", "column", "row-dense", "column-dense"},
 		GridAutoFlow,

resizable.go

@@ -11,22 +11,23 @@ const (
 	// The "side" int property determines which side of the container is used to resize.
 	// The value of property is or-combination of TopSide (1), RightSide (2), BottomSide (4), and LeftSide (8)
 	Side = "side"
+
 	// ResizeBorderWidth is the constant for the "resize-border-width" property tag.
 	// The "ResizeBorderWidth" SizeUnit property determines the width of the resizing border
 	ResizeBorderWidth = "resize-border-width"
-	// CellVerticalAlign is the constant for the "cell-vertical-align" property tag.
-	CellVerticalAlign = "cell-vertical-align"
-	// CellHorizontalAlign is the constant for the "cell-horizontal-align" property tag.
-	CellHorizontalAlign = "cell-horizontal-align"
 
 	// TopSide is value of the "side" property: the top side is used to resize
 	TopSide = 1
+
 	// RightSide is value of the "side" property: the right side is used to resize
 	RightSide = 2
+
 	// BottomSide is value of the "side" property: the bottom side is used to resize
 	BottomSide = 4
+
 	// LeftSide is value of the "side" property: the left side is used to resize
 	LeftSide = 8
+
 	// AllSides is value of the "side" property: all sides is used to resize
 	AllSides = TopSide | RightSide | BottomSide | LeftSide
 )

view.go

@@ -650,6 +650,8 @@ func viewPropertyChanged(view *viewData, tag string) {
 	case ZIndex, Order, TabSize:
 		if i, ok := intProperty(view, tag, session, 0); ok {
 			session.updateCSSProperty(htmlID, tag, strconv.Itoa(i))
+		} else {
+			session.updateCSSProperty(htmlID, tag, "")
 		}
 		return
 
@@ -697,8 +699,11 @@ func viewPropertyChanged(view *viewData, tag string) {
 	}
 
 	if cssTag, ok := sizeProperties[tag]; ok {
-		size, _ := sizeProperty(view, tag, session)
+		if size, ok := sizeProperty(view, tag, session); ok {
-		session.updateCSSProperty(htmlID, cssTag, size.cssString("", session))
+			session.updateCSSProperty(htmlID, cssTag, size.cssString("", session))
+		} else {
+			session.updateCSSProperty(htmlID, cssTag, "")
+		}
 		return
 	}
 
@@ -719,8 +724,11 @@ func viewPropertyChanged(view *viewData, tag string) {
 	}
 
 	if valuesData, ok := enumProperties[tag]; ok && valuesData.cssTag != "" {
-		n, _ := enumProperty(view, tag, session, 0)
+		if n, ok := enumProperty(view, tag, session, 0); ok {
-		session.updateCSSProperty(htmlID, valuesData.cssTag, valuesData.cssValues[n])
+			session.updateCSSProperty(htmlID, valuesData.cssTag, valuesData.cssValues[n])
+		} else {
+			session.updateCSSProperty(htmlID, valuesData.cssTag, "")
+		}
 		return
 	}
 
@@ -728,6 +736,8 @@ func viewPropertyChanged(view *viewData, tag string) {
 		if tag == floatTag {
 			if f, ok := floatTextProperty(view, floatTag, session, 0); ok {
 				session.updateCSSProperty(htmlID, floatTag, f)
+			} else {
+				session.updateCSSProperty(htmlID, floatTag, "")
 			}
 			return
 		}