JSON Column width

%3CLINGO-SUB%20id%3D%22lingo-sub-1550282%22%20slang%3D%22en-US%22%3EJSON%20Column%20width%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1550282%22%20slang%3D%22en-US%22%3E%3CP%3E%3CFONT%20face%3D%22Calibri%22%20color%3D%22%23000000%22%3EHello%20SharePoint%20Forum%2C%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22Calibri%22%20color%3D%22%23000000%22%3EHoping%20you%20can%20help%20with%20a%20question%20Regarding%20JSON%20formatting.%20I%E2%80%99ve%20got%20a%20list%20with%20two%20columns%3A%20a%20single%20field%20and%20a%20multi-text%20line%20that%20I%E2%80%99m%20hoping%20to%20better%20format.%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22Calibri%22%20color%3D%22%23000000%22%3EThe%20issue%3A%20In%20my%20list%20(and%20consequently%20my%20page)%2C%20for%20new%20users%20that%20haven%E2%80%99t%20visited%20the%20site%2C%20the%20column%20width%20isn%E2%80%99t%20automatically%20moving%20it%20over%20as%20far%20as%20it%20could%20(like%20by%20a%20lot%E2%80%A6)%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22Calibri%22%20color%3D%22%23000000%22%3EI%E2%80%99ve%20played%20around%20with%20the%20JSON%20and%20have%20tried%20width%2C%20but%20it%20doesn%E2%80%99t%20seem%20to%20actually%20move%20the%20width%20over.%20I%20have%20to%20physically%20drag%20it%20over%2C%20and%20then%20it%20seems%20to%20work%20%E2%80%93%20but%20I%20don%E2%80%99t%20want%20to%20make%20each%20user%20do%20that.%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22Calibri%22%20color%3D%22%23000000%22%3EAnybody%20been%20successful%20doing%20getting%20the%20width%20of%20the%20column%20to%20be%20larger%3F%20I%E2%80%99m%20not%20a%20coder%2C%20so%20less%20is%20more%20for%20a%20solution.%3C%2FFONT%3E%3CFONT%20face%3D%22Calibri%22%20color%3D%22%23000000%22%3E%20Thanks%2C%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1550282%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EJson%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1552152%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Column%20width%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1552152%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F715855%22%20target%3D%22_blank%22%3E%40specoop1585%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20adjust%20the%20width%20of%20a%20column%20by%20dragging%20it%20and%20saving%20the%20view.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1553974%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Column%20width%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1553974%22%20slang%3D%22en-US%22%3E%3CP%3EAppreciate%20the%20response%20--%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F5628%22%20target%3D%22_blank%22%3E%40Matti%20Paukkonen%3C%2FA%3E%26nbsp%3B-%20that%20works%20for%20me%20on%20my%20machine%20(and%20in%20that%20one%20broswer)%2C%20but%20it's%20not%20working%20in%20a%20different%20browser%20or%20for%20my%20other%20users.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%2C%3C%2FP%3E%3CP%3ESpencer%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20also%20isn't%20working.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%40currentField%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22width%22%3A%20%22100%25%22%2C%3CBR%20%2F%3E%22font-size%22%3A%20%221.2em%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1554001%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Column%20width%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1554001%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F715855%22%20target%3D%22_blank%22%3E%40specoop1585%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20got%20it%20working%20with%20different%20browsers%20on%20my%20machine%20(Edge%20Chromium%2FChrome%2FFirefox).%20I'll%20try%20this%20one%20out%20with%20my%20colleague%20tomorrow.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1556351%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Column%20width%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1556351%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F715855%22%20target%3D%22_blank%22%3E%40specoop1585%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20works%20also%20with%20my%20colleague.%3C%2FP%3E%3CDIV%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%3CP%3EIn%20list%20I%20just%20save%20view%20with%20the%20same%20name%20after%20changing%20column%20width.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Annotation%202020-07-30%20181103.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F209075i2B943CFAA88A0F5A%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Annotation%202020-07-30%20181103.png%22%20alt%3D%22Annotation%202020-07-30%20181103.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EList%20view%20web%20part%20also%20shows%20it%20correctly.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22listview.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F209077i8B6972F1528928A6%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22listview.png%22%20alt%3D%22listview.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1762447%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Column%20width%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1762447%22%20slang%3D%22en-US%22%3EI%20have%20tried%20both%20and%20it%20is%20not%20working%20in%20my%20tenant.%3CBR%20%2F%3EIs%20there%20any%20sort%20of%20class%20we%20can%20try%20with%20JSON%3F%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Hello SharePoint Forum,

Hoping you can help with a question Regarding JSON formatting. I’ve got a list with two columns: a single field and a multi-text line that I’m hoping to better format.

The issue: In my list (and consequently my page), for new users that haven’t visited the site, the column width isn’t automatically moving it over as far as it could (like by a lot…)

I’ve played around with the JSON and have tried width, but it doesn’t seem to actually move the width over. I have to physically drag it over, and then it seems to work – but I don’t want to make each user do that.

Anybody been successful doing getting the width of the column to be larger? I’m not a coder, so less is more for a solution. Thanks,

6 Replies
Highlighted

@specoop1585 

 

You can adjust the width of a column by dragging it and saving the view.

Highlighted

Appreciate the response -- @Matti Paukkonen - that works for me on my machine (and in that one broswer), but it's not working in a different browser or for my other users. 

 

Best,

Spencer

 

This also isn't working. 

 

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"width": "100%",
"font-size": "1.2em"
}
}

Highlighted

@specoop1585 

 

I got it working with different browsers on my machine (Edge Chromium/Chrome/Firefox). I'll try this one out with my colleague tomorrow.

Highlighted

@specoop1585 

 

This works also with my colleague.

 

In list I just save view with the same name after changing column width.

Annotation 2020-07-30 181103.png

 

List view web part also shows it correctly.

listview.png

 

Highlighted
I have tried both and it is not working in my tenant.
Is there any sort of class we can try with JSON?
Highlighted
Can you please attempt this again where you drag, save the view and have a different user/browser/session test to see that your changes are shown for everyone?

I cannot get this to work and would like to know if there's another way to do it.