no correct min-width calculation for view-formatting on SharePoint list, when "hideSelection": false

%3CLINGO-SUB%20id%3D%22lingo-sub-459683%22%20slang%3D%22en-US%22%3Eno%20correct%20min-width%20calculation%20for%20view-formatting%20on%20SharePoint%20list%2C%20when%20%22hideSelection%22%3A%20false%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-459683%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3EI'm%20using%20the%26nbsp%3Bview-formatting%20on%20a%20SharePoint%20list.%3CBR%20%2F%3EI%20want%20to%20set%20the%26nbsp%3B%22hideSelection%22%20to%20false%2C%20because%20I%20like%20to%20have%20the%20right-%20and%20double-click%20functionalities%20on%20working%20with%20list%20items.%3C%2FP%3E%3CP%3EHere%20is%20a%26nbsp%3Bexcerpt%20of%20the%20code%3A%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22hideSelection%22%3A%20false%2C%3CBR%20%2F%3E%22hideColumnHeader%22%3A%20true%2C%3CBR%20%2F%3E%22rowFormatter%22%3A%20%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22class%22%3A%20%22ms-borderColor-neutralLight%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22display%22%3A%20%22flex%22%2C%3CBR%20%2F%3E%22position%22%3A%20%22relative%22%2C%3CBR%20%2F%3E%22flex-wrap%22%3A%20%22wrap%22%2C%3CBR%20%2F%3E%22width%22%3A%20%22%22%2C%3CBR%20%2F%3E%22align-items%22%3A%20%22stretch%22%2C%3CBR%20%2F%3E%22flex-direction%22%3A%20%22column%22%2C%3CBR%20%2F%3E%22box-sizing%22%3A%20%22border-box%22%2C%3CBR%20%2F%3E%22border-width%22%3A%20%220px%22%2C%3CBR%20%2F%3E%22border-left-width%22%3A%20%224px%22%2C%3CBR%20%2F%3E%22border-style%22%3A%20%22solid%22%2C%3CBR%20%2F%3E%22border-left-color%22%3A%20%22%23107C10%22%2C%3CBR%20%2F%3E%22padding-bottom%22%3A%20%2220px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22display%22%3A%20%22block%22%2C%3CBR%20%2F%3E%22flex-wrap%22%3A%20%22wrap%22%2C%3CBR%20%2F%3E%22align-items%22%3A%20%22stretch%22%2C%3CBR%20%2F%3E%22box-sizing%22%3A%20%22border-box%22%2C%3CBR%20%2F%3E%22padding%22%3A%20%225px%200%200%2020px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3C%2FP%3E%3CP%3E.......%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEverything%20is%20working%20correctly%2C%20but%2C%20when%20I%20set%20the%26nbsp%3B%22hideSelection%22%20to%20false%2C%20the%20min-width%20on%20the%20items%20are%20not%20calculated%20correctly%20as%20it%20does%2C%20when%20I%20set%26nbsp%3B%22hideSelection%22%20to%20true.%3C%2FP%3E%3CP%3EWhen%20I%20open%20the%20side%20on%20mobile%2C%20the%26nbsp%3Bmin-width%20calculation%20is%20also%20set%20correctly.%3C%2FP%3E%3CP%3EHere%20some%20ScreenShots%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDesktop%3A%20(min-width%20is%20not%20working%20-%26gt%3B%200px)%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20944px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F109064iCE67E6EB97CB1B04%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22width%20calculation.png%22%20title%3D%22width%20calculation.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F109067i5DBE3BC20F347F37%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22width%20calculation01.png%22%20title%3D%22width%20calculation01.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOn%20Mobile%20the%20min-width%20is%20set%20correctly%3A%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20891px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F109065i46C8A69A6C612902%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22width%20calculation%20right%20on%20mobile.png%22%20title%3D%22width%20calculation%20right%20on%20mobile.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F109066i9BE88C8F15B4306C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22width%20calculation%20right%20on%20mobile02.png%22%20title%3D%22width%20calculation%20right%20on%20mobile02.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20that%20a%20bug%20or%20can%20I%20solve%20this%20problem%2C%20by%20changing%20the%20code%3F%3C%2FP%3E%3CP%3EThanks%20a%20lot%3CBR%20%2F%3EKind%20Regards%3CBR%20%2F%3EMichael%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-459683%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EResponsive%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-650063%22%20slang%3D%22en-US%22%3ERe%3A%20no%20correct%20min-width%20calculation%20for%20view-formatting%20on%20SharePoint%20list%2C%20when%20%22hideSelectio%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-650063%22%20slang%3D%22en-US%22%3E%3CP%3Enobody%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-668840%22%20slang%3D%22en-US%22%3ERe%3A%20no%20correct%20min-width%20calculation%20for%20view-formatting%20on%20SharePoint%20list%2C%20when%20%22hideSelectio%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-668840%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F248588%22%20target%3D%22_blank%22%3E%40lotz-hellerau%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20running%20into%20the%20same%20issue%20with%26nbsp%3BhideSelection%22%3A%20true.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWould%20love%20to%20hear%20if%20others%20have%20solved%20the%20issue%20with%20row%20width.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-670752%22%20slang%3D%22en-US%22%3ERe%3A%20no%20correct%20min-width%20calculation%20for%20view-formatting%20on%20SharePoint%20list%2C%20when%20%22hideSelectio%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-670752%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F354700%22%20target%3D%22_blank%22%3E%40bird_00%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3EHi%2C%20no%20there%20is%20nothing%20new%20about%20it.%3CBR%20%2F%3EFor%20now%20I%20solved%20this%20by%20making%20a%20view%20for%20larger%20screens%20and%20one%20for%20mobile%3A%3CBR%20%2F%3E%22width%22%3A%20%22%3Dif(%40window.innerWidth%20%26gt%3B%20'999'%2C%20'1000px'%2C%20'')%22%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20on%20screens%20with%20more%20then%20999px%20I%20have%20a%20fixed%20width%20and%20on%20smaller%20screens%2C%20like%20on%20mobile%20devices%2C%20the%20width%20is%20correct%20on%20100%25.%3C%2FP%3E%3CP%3EI%20really%20hope%2C%20microsoft%20will%20fixe%20this%2C%20because%20this%20solution%20isn't%20really%26nbsp%3Bsatisfying.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi :)

I'm using the view-formatting on a SharePoint list.
I want to set the "hideSelection" to false, because I like to have the right- and double-click functionalities on working with list items.

Here is a excerpt of the code:

{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": false,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"attributes": {
"class": "ms-borderColor-neutralLight"
},
"style": {
"display": "flex",
"position": "relative",
"flex-wrap": "wrap",
"width": "",
"align-items": "stretch",
"flex-direction": "column",
"box-sizing": "border-box",
"border-width": "0px",
"border-left-width": "4px",
"border-style": "solid",
"border-left-color": "#107C10",
"padding-bottom": "20px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "block",
"flex-wrap": "wrap",
"align-items": "stretch",
"box-sizing": "border-box",
"padding": "5px 0 0 20px"
},
"children": [
{

.......

 

Everything is working correctly, but, when I set the "hideSelection" to false, the min-width on the items are not calculated correctly as it does, when I set "hideSelection" to true.

When I open the side on mobile, the min-width calculation is also set correctly.

Here some ScreenShots:

 

Desktop: (min-width is not working -> 0px)

width calculation.png

width calculation01.png

 

 

On Mobile the min-width is set correctly:width calculation right on mobile.pngwidth calculation right on mobile02.png

 

Is that a bug or can I solve this problem, by changing the code?

Thanks a lot
Kind Regards
Michael

 

3 Replies
Highlighted
Highlighted

@lotz-hellerau 

I'm running into the same issue with hideSelection": true.

 

Would love to hear if others have solved the issue with row width.

Highlighted

@bird_00 
Hi, no there is nothing new about it.
For now I solved this by making a view for larger screens and one for mobile:
"width": "=if(@window.innerWidth > '999', '1000px', '')"

 

So on screens with more then 999px I have a fixed width and on smaller screens, like on mobile devices, the width is correct on 100%.

I really hope, microsoft will fixe this, because this solution isn't really satisfying.