3

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?

Improve this question

    1 Answer 1

    Reset to default
    2

    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.

    Improve this answer
    2
    • 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
      CommentedJan 17, 2020 at 5:24
    • Same issue here -the tileProps option isn't very useful if you can't flex the tile container itself. Disappointing.
      – matt
      CommentedMay 18, 2020 at 18:24

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.