Fixed ListView item height bug

app_scripts.js

@@ -609,7 +609,7 @@ function listItemClickEvent(element, event) {
 		selected = element.className.indexOf("ruiListItemFocused") >= 0 || element.className.indexOf("ruiListItemSelected") >= 0;
 	}
 
-	var list = element.parentNode
+	var list = element.parentNode.parentNode
 	if (list) {
 		if (!selected) {
 			selectListItem(list, element, true)
@@ -705,6 +705,7 @@ function selectListItem(element, item, needSendMessage) {
 }
 
 function findRightListItem(list, x, y) {
+	list = list.childNodes[0];
 	var result;
 	var count = list.childNodes.length;
 	for (var i = 0; i < count; i++) {
@@ -725,6 +726,7 @@ function findRightListItem(list, x, y) {
 }
 
 function findLeftListItem(list, x, y) {
+	list = list.childNodes[0];
 	var result;
 	var count = list.childNodes.length;
 	for (var i = 0; i < count; i++) {
@@ -745,6 +747,7 @@ function findLeftListItem(list, x, y) {
 }
 
 function findTopListItem(list, x, y) {
+	list = list.childNodes[0];
 	var result;
 	var count = list.childNodes.length;
 	for (var i = 0; i < count; i++) {
@@ -765,6 +768,7 @@ function findTopListItem(list, x, y) {
 }
 
 function findBottomListItem(list, x, y) {
+	list = list.childNodes[0];
 	var result;
 	var count = list.childNodes.length;
 	for (var i = 0; i < count; i++) {

app_styles.css

@@ -98,8 +98,10 @@ body {
 
 .ruiListView {
   overflow: auto;
+  /*
 	display: flex;
 	align-content: stretch;
+  */
 }
 /*
 @media (prefers-color-scheme: light) {

listLayout.go

@@ -125,11 +125,20 @@ func GetListOrientation(view View, subviewID string) int {
 	if subviewID != "" {
 		view = ViewByID(view, subviewID)
 	}
-	if view == nil {
+
-		return 0
+	if view != nil {
-	}
+		if orientation, ok := valueToOrientation(view.Get(Orientation), view.Session()); ok {
-	orientation, _ := getOrientation(view, view.Session())
 			return orientation
+		}
+
+		if value, ok := valueFromStyle(view, Orientation); ok {
+			if orientation, ok := valueToOrientation(value, view.Session()); ok {
+				return orientation
+			}
+		}
+	}
+
+	return 0
 }
 
 // GetListWrap returns the wrap type of a ListLayout or ListView subview:
@@ -140,7 +149,7 @@ func GetListWrap(view View, subviewID string) int {
 		view = ViewByID(view, subviewID)
 	}
 	if view != nil {
-		if result, ok := enumProperty(view, Wrap, view.Session(), 0); ok {
+		if result, ok := enumStyledProperty(view, Wrap, 0); ok {
 			return result
 		}
 	}

listView.go

@@ -215,11 +215,8 @@ func (listView *listViewData) set(tag string, value interface{}) bool {
 			return true
 		}
 
-	case Orientation, Wrap:
+	case Orientation, Wrap, VerticalAlign, HorizontalAlign, Style, StyleDisabled:
-		if listView.viewData.set(tag, value) {
+		result = listView.viewData.set(tag, value)
-			updateCSSStyle(listView.htmlID(), listView.session)
-			return true
-		}
 
 	case ItemWidth, ItemHeight:
 		result = listView.setSizeProperty(tag, value)
@@ -575,36 +572,6 @@ func (listView *listViewData) getItemFrames() []Frame {
 	return listView.itemFrame
 }
 
-func (listView *listViewData) htmlProperties(self View, buffer *strings.Builder) {
-	buffer.WriteString(`onfocus="listViewFocusEvent(this, event)" onblur="listViewBlurEvent(this, event)"`)
-	buffer.WriteString(` onkeydown="listViewKeyDownEvent(this, event)" data-focusitemstyle="`)
-	buffer.WriteString(listView.currentStyle())
-	buffer.WriteString(`" data-bluritemstyle="`)
-	buffer.WriteString(listView.currentInactiveStyle())
-	buffer.WriteString(`"`)
-	current := GetListViewCurrent(listView, "")
-	if listView.adapter != nil && current >= 0 && current < listView.adapter.ListSize() {
-		buffer.WriteString(` data-current="`)
-		buffer.WriteString(listView.htmlID())
-		buffer.WriteRune('-')
-		buffer.WriteString(strconv.Itoa(current))
-		buffer.WriteRune('"')
-	}
-}
-
-func (listView *listViewData) cssStyle(self View, builder cssBuilder) {
-	listView.viewData.cssStyle(self, builder)
-
-	if GetListWrap(listView, "") != WrapOff {
-		switch GetListOrientation(listView, "") {
-		case TopDownOrientation, BottomUpOrientation:
-			builder.add(`max-height`, `100%`)
-		default:
-			builder.add(`max-width`, `100%`)
-		}
-	}
-}
-
 func (listView *listViewData) itemAlign(self View, buffer *strings.Builder) {
 	values := enumProperties[ItemHorizontalAlign].cssValues
 	if hAlign := GetListItemHorizontalAlign(listView, ""); hAlign >= 0 && hAlign < len(values) {
@@ -911,11 +878,40 @@ func (listView *listViewData) updateCheckboxItem(index int, checked bool) {
 	session.runScript(buffer.String())
 }
 
-func (listView *listViewData) htmlSubviews(self View, buffer *strings.Builder) {
+func (listView *listViewData) htmlProperties(self View, buffer *strings.Builder) {
-	if listView.adapter == nil {
+	buffer.WriteString(`onfocus="listViewFocusEvent(this, event)" onblur="listViewBlurEvent(this, event)"`)
-		return
+	buffer.WriteString(` onkeydown="listViewKeyDownEvent(this, event)" data-focusitemstyle="`)
+	buffer.WriteString(listView.currentStyle())
+	buffer.WriteString(`" data-bluritemstyle="`)
+	buffer.WriteString(listView.currentInactiveStyle())
+	buffer.WriteString(`"`)
+	current := GetListViewCurrent(listView, "")
+	if listView.adapter != nil && current >= 0 && current < listView.adapter.ListSize() {
+		buffer.WriteString(` data-current="`)
+		buffer.WriteString(listView.htmlID())
+		buffer.WriteRune('-')
+		buffer.WriteString(strconv.Itoa(current))
+		buffer.WriteRune('"')
 	}
-	if listView.adapter.ListSize() == 0 {
+}
+
+/*
+func (listView *listViewData) cssStyle(self View, builder cssBuilder) {
+	listView.viewData.cssStyle(self, builder)
+
+	if GetListWrap(listView, "") != WrapOff {
+		switch GetListOrientation(listView, "") {
+		case TopDownOrientation, BottomUpOrientation:
+			builder.add(`max-height`, `100%`)
+		default:
+			builder.add(`max-width`, `100%`)
+		}
+	}
+}
+*/
+
+func (listView *listViewData) htmlSubviews(self View, buffer *strings.Builder) {
+	if listView.adapter == nil || listView.adapter.ListSize() == 0 {
 		return
 	}
 
@@ -924,12 +920,129 @@ func (listView *listViewData) htmlSubviews(self View, buffer *strings.Builder) {
 		defer listView.session.setIgnoreViewUpdates(false)
 	}
 
+	buffer.WriteString(`<div style="display: flex; align-content: stretch;`)
+
+	wrap := GetListWrap(listView, "")
+	orientation := GetListOrientation(listView, "")
+	rows := (orientation == StartToEndOrientation || orientation == EndToStartOrientation)
+
+	if rows {
+		if wrap == WrapOff {
+			buffer.WriteString(` min-width: 100%; height: 100%;`)
+		} else {
+			buffer.WriteString(` width: 100%; min-height: 100%;`)
+		}
+	} else {
+		if wrap == WrapOff {
+			buffer.WriteString(` width: 100%; min-height: 100%;`)
+		} else {
+			buffer.WriteString(` min-width: 100%; height: 100%;`)
+		}
+	}
+
+	buffer.WriteString(` flex-flow: `)
+	buffer.WriteString(enumProperties[Orientation].cssValues[orientation])
+
+	switch wrap {
+	case WrapOn:
+		buffer.WriteString(` wrap;`)
+
+	case WrapReverse:
+		buffer.WriteString(` wrap-reverse;`)
+
+	default:
+		buffer.WriteString(`;`)
+	}
+
+	var hAlignTag, vAlignTag string
+	if rows {
+		hAlignTag = `justify-content`
+		vAlignTag = `align-items`
+	} else {
+		hAlignTag = `align-items`
+		vAlignTag = `justify-content`
+	}
+
+	value := ""
+	if align, ok := enumStyledProperty(listView, HorizontalAlign, LeftAlign); ok {
+		switch align {
+		case LeftAlign:
+			if (!rows && wrap == WrapReverse) || orientation == EndToStartOrientation {
+				value = `flex-end`
+			} else {
+				value = `flex-start`
+			}
+		case RightAlign:
+			if (!rows && wrap == WrapReverse) || orientation == EndToStartOrientation {
+				value = `flex-start`
+			} else {
+				value = `flex-end`
+			}
+		case CenterAlign:
+			value = `center`
+
+		case StretchAlign:
+			if rows {
+				value = `space-between`
+			} else {
+				value = `stretch`
+			}
+		}
+	}
+
+	if value != "" {
+		buffer.WriteRune(' ')
+		buffer.WriteString(hAlignTag)
+		buffer.WriteString(`: `)
+		buffer.WriteString(value)
+		buffer.WriteRune(';')
+	}
+
+	value = ""
+	if align, ok := enumStyledProperty(listView, VerticalAlign, TopAlign); ok {
+		switch align {
+		case TopAlign:
+			if (rows && wrap == WrapReverse) || orientation == BottomUpOrientation {
+				value = `flex-end`
+			} else {
+				value = `flex-start`
+			}
+		case BottomAlign:
+			if (rows && wrap == WrapReverse) || orientation == BottomUpOrientation {
+				value = `flex-start`
+			} else {
+				value = `flex-end`
+			}
+		case CenterAlign:
+			value = `center`
+
+		case StretchAlign:
+			if rows {
+				value = `stretch`
+			} else {
+				value = `space-between`
+			}
+		}
+	}
+
+	if value != "" {
+		buffer.WriteRune(' ')
+		buffer.WriteString(vAlignTag)
+		buffer.WriteString(`: `)
+		buffer.WriteString(value)
+		buffer.WriteRune(';')
+	}
+
+	buffer.WriteString(`">`)
+
 	checkbox := GetListViewCheckbox(listView, "")
 	if checkbox == NoneCheckbox {
 		listView.noneCheckboxSubviews(self, buffer)
 	} else {
 		listView.checkboxSubviews(self, buffer, checkbox)
 	}
+
+	buffer.WriteString(`</div>`)
 }
 
 func (listView *listViewData) handleCommand(self View, command string, data DataObject) bool {

viewStyle.go

@@ -291,7 +291,7 @@ func (style *viewStyle) cssViewStyle(builder cssBuilder, session Session) {
 	}
 
 	wrap, _ := enumProperty(style, Wrap, session, 0)
-	orientation, ok := getOrientation(style, session)
+	orientation, ok := valueToOrientation(style.Get(Orientation), session)
 	if ok || wrap > 0 {
 		cssText := enumProperties[Orientation].cssValues[orientation]
 		switch wrap {
@@ -360,9 +360,9 @@ func (style *viewStyle) cssViewStyle(builder cssBuilder, session Session) {
 
 		case StretchAlign:
 			if rows {
-				builder.add(hAlignTag, `stretch`)
+				builder.add(vAlignTag, `stretch`)
 			} else {
-				builder.add(hAlignTag, `space-between`)
+				builder.add(vAlignTag, `space-between`)
 			}
 		}
 	}

viewStyleGet.go

@@ -4,8 +4,8 @@ import (
 	"strings"
 )
 
-func getOrientation(style Properties, session Session) (int, bool) {
+func valueToOrientation(value interface{}, session Session) (int, bool) {
-	if value := style.Get(Orientation); value != nil {
+	if value != nil {
 		switch value := value.(type) {
 		case int:
 			return value, true
@@ -30,10 +30,14 @@ func getOrientation(style Properties, session Session) (int, bool) {
 			}
 		}
 	}
-
 	return 0, false
 }
 
+/*
+func getOrientation(style Properties, session Session) (int, bool) {
+	return valueToOrientation(style.Get(Orientation), session)
+}
+*/
 func (style *viewStyle) Get(tag string) interface{} {
 	return style.get(strings.ToLower(tag))
 }