Hi everyone, I’m working with the Grid Layout in Vuforia Studio and I’m trying to dynamically show or hide specific rows. The problem I’m facing: I cannot dynamically change the row or column class. I also cannot set their height/size to 0px at runtime. Simply hiding the widget inside the cell doesn’t help, because the row and column space remains visible. My goal is simple:I want all rows to exist in the layout, but I want to toggle their visibility (visible/invisible) without leaving empty space. Is there any workaround or method to: hide a full row in a Grid Layout? collapse its height (similar to CSS display: none)? or dynamically modify grid definitions at runtime? Any suggestions or best practices would be greatly appreciated.Thank you!

M

MA8731174

16-Pearl

Solved

How to Show/Hide Rows in a Grid Layout Dynamically?

Forum|Forum|4 months ago
December 4, 2025
1 reply
215 views

Hi everyone,

I’m working with the Grid Layout in Vuforia Studio and I’m trying to dynamically show or hide specific rows.

The problem I’m facing:

I cannot dynamically change the row or column class.
I also cannot set their height/size to 0px at runtime.
Simply hiding the widget inside the cell doesn’t help, because the row and column space remains visible.

My goal is simple:
I want all rows to exist in the layout, but I want to toggle their visibility (visible/invisible) without leaving empty space.

Is there any workaround or method to:

hide a full row in a Grid Layout?
collapse its height (similar to CSS display: none)?
or dynamically modify grid definitions at runtime?

Any suggestions or best practices would be greatly appreciated.
Thank you!

Best answer by MA8731174

After some testing i am able to find my own solution for this issue.

class (application)

.hideRowDynamic div.row[data-hide="true"] {
display: none !important;
}

Assign this class to gridLayout on which you would like to have this behaviour -> hideRowDynamic

home.js

$scope.hideRow = function (rowIndex) {

let widget = document.querySelector('[widget-id="gridLayout-77"]');

if (!widget) return;

let rows = widget.querySelectorAll("div.row");

if (rows[rowIndex - 1]) {
rows[rowIndex - 1].setAttribute("data-hide", "true");
}
};

call the function on button click or in angular.element(document).ready(function () { })

$scope.hideRow("7");

It would for example hide the 7th row from grid layout..

M