SOLVED

Use Format View on List WebPart to Create 'Tile View'

%3CLINGO-SUB%20id%3D%22lingo-sub-360216%22%20slang%3D%22en-US%22%3EUse%20Format%20View%20on%20List%20WebPart%20to%20Create%20'Tile%20View'%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-360216%22%20slang%3D%22en-US%22%3E%3CP%3EGreetings%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20The%20json%20file%20at%20the%20following%20URL%20allows%20viewing%20a%20list%20in%20Tile%20View.%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Fblob%2Fmaster%2Fview-samples%2Fgeneric-tile-format%2Ftile-view.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Fblob%2Fmaster%2Fview-samples%2Fgeneric-tile-format%2Ftile-view.json%3C%2FA%3E%3C%2FP%3E%3CP%3EThe%20tile%20view%20looks%20fine%20when%20applying%20the%20JSON%20via%20%22Format%20View%22.%26nbsp%3B%20However%2C%20when%20saving%20and%20going%20back%20to%20the%20hosting%20page%20the%20tiles%20appear%20staggered.%3C%2FP%3E%3CP%3EThe%20images%20below%20demonstrate%20the%20problem.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20303px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F85080i9625A14DAECF302E%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22image.png%22%20title%3D%22image.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EAfter%20application%20of%20JSON%20via%20%22Format%20View%22%3C%2FSPAN%3E%3C%2FSPAN%3E%26nbsp%3B%20%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20303px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F85081i1C1D724EFDC86EB3%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22image.png%22%20title%3D%22image.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EWebpart%20as%20seen%20in%20host%20site%20with%20%22Modern%20Theme%22%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAfter%20running%20Dev%20Tools%20from%20the%20browser%2C%20examining%20%22ms-list-cell%22%20class%20on%20each%20of%20the%20two%20pages%20reveals%20that%20%22min-height%22%20is%20set%20to%200%20when%20editing%20the%20list%2C%20but%20is%20set%20to%2038px%20on%20the%20Modern%20Themed%20site%20page.%26nbsp%3B%20Removing%20the%20min-height%20style%20corrects%20the%20staggered%20appearance.%26nbsp%3B%3C%2FP%3E%3CP%3EQuestions%3A%3C%2FP%3E%3CP%3EHas%20anyone%20seen%20this%20before%3F%3C%2FP%3E%3CP%3EIs%20there%20a%20work-around%3F%3C%2FP%3E%3CP%3EThis%20is%20happeneing%20on%20Office%20365%2C%20sharepoint%20online.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20in%20adv.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-360411%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20Format%20View%20on%20List%20WebPart%20to%20Create%20'Tile%20View'%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-360411%22%20slang%3D%22en-US%22%3E%3CP%3EIt's%20been%20reported%20here%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F3537%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F3537%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-360220%22%20slang%3D%22en-US%22%3ERe%3A%20Use%20Format%20View%20on%20List%20WebPart%20to%20Create%20'Tile%20View'%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-360220%22%20slang%3D%22en-US%22%3EYes%2C%20I%20have%20seen%20the%20same%20problem%20when%20I%20tried%20it%2C%20but%20had%20to%20time%20to%20investigate%20as%20I%20was%20just%20quickly%20trying%20the%20code.%3CBR%20%2F%3EThis%20could%20be%20simply%20down%20to%20CSS%20changes%20since%20the%20sample%20was%20created.%20Check%20the%20issues%20list%20on%20HitHub%20and%20open%20a%20new%20issue%20if%20you%20can't%20find%20a%20related%20one.%20If%20you%20manage%20to%20fix%20it%2C%20please%20contribute%20back%20with%20the%20fix%20%3A)%3C%2Fimg%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Greetings,

    The json file at the following URL allows viewing a list in Tile View.

https://github.com/SharePoint/sp-dev-list-formatting/blob/master/view-samples/generic-tile-format/ti...

The tile view looks fine when applying the JSON via "Format View".  However, when saving and going back to the hosting page the tiles appear staggered.

The images below demonstrate the problem.

 

After application of JSON via "Format View"After application of JSON via "Format View"   Webpart as seen in host site with "Modern Theme"Webpart as seen in host site with "Modern Theme"

After running Dev Tools from the browser, examining "ms-list-cell" class on each of the two pages reveals that "min-height" is set to 0 when editing the list, but is set to 38px on the Modern Themed site page.  Removing the min-height style corrects the staggered appearance. 

Questions:

Has anyone seen this before?

Is there a work-around?

This is happeneing on Office 365, sharepoint online.

 

Thanks in adv. 

2 Replies
Highlighted
Yes, I have seen the same problem when I tried it, but had to time to investigate as I was just quickly trying the code.
This could be simply down to CSS changes since the sample was created. Check the issues list on HitHub and open a new issue if you can't find a related one. If you manage to fix it, please contribute back with the fix :)
Highlighted