Display list view control items vertically instead of horizontally

  • 22 February 2018
  • 2 replies
  • 26 views

Userlevel 2
Badge +9

Is there a way to orient the items displayed in a list view control in a vertical format?  I can work with the horizontal format if necessary, but I was wondering if there was a way to display things vertically.  When I choose a vendor in my drop down, it displays all the appropriate information I need.  I've tried to play around with the control to see if I could get it to orient vertically, but to no eval. Pretty much if I try to size the control to look vertically, all I end up doing is cut off information in the control.  Any ideas out there?

213470_pastedImage_1.png


2 replies

Userlevel 5
Badge +14

there is no such OOTB functionality.

you could try to play with CSS to rotate it, but the result is not very usable.

I tried with following CSS, if you want to play on your own

.myViewCtrl table.ms-listviewtable{
    transform:rotate(-90deg);
    border: 1px solid black !important;
    border-collapse: collapse !important; 
}

.myViewCtrl table.ms-listviewtable th {
    transform:rotate(90deg);
    border: 1px solid black !important;
    border-collapse: collapse !important; 
}

.myViewCtrl table.ms-listviewtable td {
    transform:rotate(90deg);
    height: 50px !important;
    width: 200px !important;
    border: 1px solid black !important;
    border-collapse: collapse !important; 
}

213676_pastedImage_1.png

Userlevel 2
Badge +9

Thanks.  For now, I'll just leave it as it is.  It actually functions fine.  I may try this for future attempts.  

Reply