CODEWITHSUNDEEP
windows-8microsoft-metrowindows-store-appswinjs
dougajmcdonald
dougajmcdonald

Reputation: 20057

Dynamically show/hide columns/rows in display: -ms-grid

I have a class using display: -ms-grid, for arguments sake, let's say it's defined as below:

.gridDiv {

    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 200px 400px 200px;

}

Is there a way to hide one of my columns via either css or js at runtime? I've hidden the elements within, but I'd like to crush down the .gridDiv, so that it only appears to have two columns.

Any thoughts appreciated.

Upvotes: 0

Views: 403

Answers (1)

Sushil
Sushil

Reputation: 5535

this can be done in your .js file. need to ensure that elements are laid out again if required after this.

var gridDiv = this.element.querySelector('.gridDiv');
var columns = '200px 200px';
// TODO -  code to compute columns
gridDiv.style.msGridColumns = columns;

Upvotes: 1

Related Questions