Sp-dev-docs: View Formatting causing issues when added using list view webpart on modern page

[harshdamaniahd]

Do we still have these kinds of issue ?
Is there a way to fix them ?
Currently i am trying to something like this :

But when i add this to modern page, it doesnt work

When i investigated, i came to know that this is because of the following CSS

What should i do in such scenario ? .

[harshdamaniahd]

I think its because of float:left used in rowFormatter
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideColumnHeader": true,
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "inline-flex",
"align-items": "stretch",
"padding": "8px",
"margin-bottom": "16px",
"max-width": "200px",
"border-radius": "8px",
"box-shadow": "4px 4px 8px darkgrey",
"margin-right": "15px",
"float": "left"
},
"attributes": {
"class": "ms-bgColor-neutralLighter"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "/sites/CAL/SiteAssets/Facebook.png?web=1"
},
"style": {
"height": "64px",
"width": "64px",
"border-radius": "25%"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"margin-left": "10px"
},
"children": [
{
"elmType": "a",
"txtContent": "Facebook 1",
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-semibold",
"href": "[$Link1]"
}
},
{
"elmType": "a",
"txtContent": "[$Link1.desc]",
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-semibold",
"href": "[$Link1]",
"title":"[$Link1.desc]"
}
},
{
"elmType": "a",
"txtContent": "Facebook 1",
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-semibold",
"href": "[$Link1]"
}
},
{
"elmType": "a",
"txtContent": "Facebook 1",
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-semibold",
"href": "[$Link1]"
}
}
]
}
]
}
}

[efkah]

The Issue is still present, i need a fix here, too.
You can use tile-view.json to reproduce -> on a modern webPart page it "jumps".

In my Opionen it is caused by styles not being loaded on the webpart page:

Uncheck the overridden min-height 0 to reproduce webpart page behaviour. also hover classes like "ms-bgColor-themePrimary--hover" dont work on webPart Page

Alternatively, write "ms-CardList" class instead of "ms-DetailsList" into the Container, it works, too

[gruering]

problem is not limited to the webpart
same issue also directly on the list view

[harshdamaniahd]

For now we cant do anything as this issue is with main office ui fabric css

[harshdamaniahd]

as mentioned here this is bug : https://github.com/SharePoint/sp-dev-list-formatting/issues/149

[svaibhav]

The fix for this issue is done in the host application (Sharepoint) itself. It is in the deployment pipeline now and should be live in next couple of weeks!

[furler]

The fix for this issue is done in the host application (Sharepoint) itself. It is in the deployment pipeline now and should be live in next couple of weeks!

Thanks svaibhav, is there any way we can track when this fix begins rolling out?

[harshdamaniahd]

This is fixed for me:-)

[furler]

This is fixed for me:-)

Oh, wow, it is for me too. I've been waiting for this, now to remember the many times I've wanted to use it. Hope they fix the class render issue soon.

[svaibhav]

@harshdamaniahd @furler This was rolled to 100% production around June 11, just in case you need this info.

[marissasinai]

Actions don't behave the same on a SP Page as they do on a List's page:

When you place the List on a Modern Page, the actions, like defaultclick, do not function the same as they do on the actual List. For example, on the List itself, when you have the defaultclick action, it behaves like the gif for this view formatting example, where the Details Pane slides out on the right side of the page. However, on a SP Page, you are taken to an entirely different tab to view the Item details. (Same experience for Edit functionality).

[PrasadKasireddy]

Duplicate of https://github.com/SharePoint/sp-dev-docs/issues/3537

[PrasadKasireddy]

Duplicate of SharePoint/sp-dev-list-formatting#192 SharePoint/sp-dev-list-formatting#154 SharePoint/sp-dev-list-formatting#204

[harshdamaniahd]

Decided not to use list view formatting on Modern pages, as it works one day and stops working another day.
It's very inconsistent, this annoys the customers.

[PrasadKasireddy]

@VesaJuvonen - this issue is back again - it functionality is not stable.
https://github.com/SharePoint/sp-dev-docs/issues/5213

[harshdamaniahd]

Here are the steps to reproduce this issue :
Create any Sharepoint list and add the following code to format it: https://github.com/harshdamaniahd/FormattingIssue/blob/master/formattingcode.json
Now add the list to page, you see something like this. The css is broken, and you also see the column header.

First thing is that column headers should not be visible

I think the problem is because of mi-height :

[svaibhav]

@harshdamaniahd The column header visibility fix is already in the deployment pipeline and will reach production soon. Can you confirm that this broken UI is only happening when the lists are being used as webparts and the list page are rendering just fine?

[svaibhav]

@harshdamaniahd using tileProps instead of rowFormatter may work as a workaround while are work on the issue.

[harshdamaniahd]

@harshdamaniahd The column header visibility fix is already in the deployment pipeline and will reach production soon. Can you confirm that this broken UI is only happening when the lists are being used as webparts and the list page are rendering just fine?

Yes i can confirm, it only happens when list is used as webpart on a pge

[asifahmeds]

@harshdamaniahd The column header visibility fix is already in the deployment pipeline and will reach production soon. Can you confirm that this broken UI is only happening when the lists are being used as webparts and the list page are rendering just fine?

This is been coming back again and again. After few hours it appears normal again. We have big demo planned today and this will be a roadblock if it is not fixed. Atleast apply that temporary fix for now please. We regret choosing list web part with json formatting.

[svaibhav]

@harshdamaniahd Why is the issue coming and going it really strange. This could probably be some caching issue, maybe CDN maybe not. Hence patching the fix today won't be possible. For the time being please see if the below work around works for you. I have basically modified your JSON to use tileProps instead is rowFormatter. You may further need to tweak the CSS (in the JSON itself) a bit. I have also create a PR for the same.

Please use the following view formatter and choose the tiles layout for now:
https://github.com/svaibhav/FormattingIssue/blob/master/formattingcode.json

[asifahmeds]

@harshdamaniahd Why is the issue coming and going it really strange. This could probably be some caching issue, maybe CDN maybe not. Hence patching the fix today won't be possible. For the time being please see if the below work around works for you. I have basically modified your JSON to use tileProps instead is rowFormatter. You may further need to tweak the CSS (in the JSON itself) a bit. I have also create a PR for the same.

Please use the following view formatter and choose the tiles layout for now:
https://github.com/svaibhav/FormattingIssue/blob/master/formattingcode.json

Hello @svaibhav ,
Not sure why but tileProps doesn't work in our sites

[svaibhav]

@asifahmeds tileProps should work with all the site. You have to make sure that you choose the tiles layout once you have applied the JSON with the tileProps. Once the tileProps are applied, you'll see a new option as Tiles in the dropdown. Please choose that and verify again.

[asifahmeds]

@asifahmeds tileProps should work with all the site. You have to make sure that you choose the tiles layout once you have applied the JSON with the tileProps. Once the tileProps are applied, you'll see a new option as Tiles in the dropdown. Please choose that and verify again.

Thank you it works for Document library. But it won't work with list view. Any update on the actual issue.

[asifahmeds]

Any update on the issue? When the fix will be applied in Prod?

[rahulbhatia517]

Any updates on the issue ?
Any recommended workarounds ?

[asifahmeds]

Seems like no one from Microsoft is seriously looking into this issue. How do we increase the priority of this issue?

[PrasadKasireddy]

@VesaJuvonen - could you please move this to doc section so that it is more visible

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[VesaJuvonen]

Moving the issue to centralized SP Dev issue list as this is not an issue related on any list formatting sample, so issue should be in sp-dev-docs repository.

[marissasinai]

@svaibhav This is happening in multiple tenant solutions right now and I need it to be fixed ASAP. Is there a specific time frame that this fix is going to be pushed out?

[furler]

@asifahmeds tileProps should work with all the site. You have to make sure that you choose the tiles layout once you have applied the JSON with the tileProps. Once the tileProps are applied, you'll see a new option as Tiles in the dropdown. Please choose that and verify again.

tileProps is a great development, and allows for a "proper" flexbox layout - the problem is it doesn't work reliably when the list is embedded via the web part. From my testing I 'think' it works only if the view is set to tiles on the list proper, then that view is edited and saved to be the default view. If any of that changes then it breaks on the page and reverts to a list view.

So, that means as well as it being unreliable, you can only have one view per list that uses tileProp if you want the list to sit on a SharePoint page.

@VesaJuvonen - This is probably a different bug, I know, but the tileProp property keeps on getting thrown around as a solution, but until either the web part gets a setting to force "tile view" - or the list itself can be saved to default to tile view - it's just not ready for production to be embedded onto SharePoint Online pages via the list web part.

[asifahmeds]

@furler - Yes, tileProps is not a workaround for this issue.

[svaibhav]

Update: We are working on the issue. And it is working fine (or has been fixed) on some of the internal development environment. Since this is a recent regression, we are trying to find out how exactly it regressed in the first place.

[asifahmeds]

@svaibhav - ETA would help us to answer our site users. Could you provide that?

[shagra-ms]

@asifahmeds The fix for this is in pipeline. It shall be available on list web parts in 2-3 weeks.

[shagra-ms]

The fix is now available in production tenants. Please let me know if this is still broken for you.

[furler]

@shagra-ms - working for me. Thanks very much for getting this done.

[FredrikEkstroem]

@shagra-ms I confirm, in my tenant issue is fixed, tnx

[gobigfoot]

The issue has been rolled out in GCC High. Thank you.

[VesaJuvonen]

Closing issue based on the acknowledgements from multiple users. Thanks for your input around this one.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues