2

I'm trying to use this MS documentation to create a tile view for my list items. About halfway down it shows how to use tileProps to enable the Tile view for the drop down and create tiles.

It works and creates a tile view where each list item is represented by a tile and the tiles flow as many fit in a line as can fit before breaking to a new line. But depending upon the screen/column size there can be an awkward empty space at the right of each "row" before it is long enough to accommodate the next item. Note the big white space off to the right side.

enter image description here

I'd like to let my cards vary in width a little bit to either fix 3 on that line or have the 2 that are there expand. In my example the json starts off like this:

{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps":
{
    "height": "250",
    "width": "350",
    "hideSelection": true,
    "formatter":
    {
    ...

The width property here sets flex:0 0 350;max-width:350px; as an element style on each of the cards/flex items. There doesn't seem to be any ability to change that.

If I leave out the width property or change that to auto or some value with units, it just renders with a default of 254px.

I'm not really good with flex, but I think I need to be able to change it to something like flex:1 1 auto;min-width:250px;max-width:400px; or whatever values would work.

Does anybody have any ideas for how to get truly responsive tiles using json formatting?

1

Unfortunately, the width and height properties within tileProps are unique among formatting properties. There are a couple of different problems, the first of which is that they don't accept a unit of measurement as you might expect (it's always pixels). Second, they don't allow for expressions. They are absolute values set at a higher level than your formatter property will have access to.

As a result, there is no way to make these values dynamic even when using things like @window.innerWidth. So for tileProps, you will get wrapping but no stretching.

However, if you are looking to create your own tile views without using the View > Tiles option then you can use flexbox directly. Here is a sample showing a responsive tile based view without using tileProps: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/contact-card-format

There are several other samples in the PnP List Formatting repo demonstrating this technique. However, be warned that large number of list items will cause problems with scrolling when taking advantage of floats and item selection turned off. This is a problem with how modern list items are "paged" rather than a direct issue with list formatting itself.

  • I saw that example before. Unfortunately, you only get one card per line with that approach; the responsiveness is for the elements within each card, but not for the organization of the cards themselves. – Rothrock Jan 17 at 5:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.