SOLVED

Customize the width of column in share point

%3CLINGO-SUB%20id%3D%22lingo-sub-918527%22%20slang%3D%22en-US%22%3ECustomize%20the%20width%20of%20column%20in%20share%20point%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-918527%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3C%2FP%3E%3CP%3EI%20would%20like%20to%20confirm%20if%20there%20is%20any%20way%20to%20customize%20the%20width%20of%20column%20in%20share%20point%20list%20that%20display%20by%20using%20Classic%20experience.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENot%20using%20Designer%2C%20it%20will%20be%20better%20if%20I%20could%20realize%20that%20by%20editing%20the%20JSON%20of%20column.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-918527%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-918572%22%20slang%3D%22en-US%22%3ERe%3A%20Customize%20the%20width%20of%20column%20in%20share%20point%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-918572%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F399400%22%20target%3D%22_blank%22%3E%40Tiffany_Jo%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3ESolution%3A%3C%2FSTRONG%3E%3C%2FP%3E%3CUL%3E%3CLI%3ENavigate%20to%20the%20Site%20%26gt%3B%26gt%3B%20Click%20on%20Site%20Settings%20gear%20%26gt%3B%26gt%3B%20Edit%20Page%3C%2FLI%3E%3CLI%3EAdd%20Web%20Part%20%26gt%3B%26gt%3B%20Insert%20%22Script%20Editor%22%20Web%20Part%3C%2FLI%3E%3CLI%3EEdit%20Snippet%20and%20Insert%20the%20below%20Style%20in%20it.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CDIV%3E%3CDIV%20class%3D%22syntaxhighlighter%20%20css%22%3E%3CTABLE%20border%3D%220%22%20cellspacing%3D%220%22%20cellpadding%3D%220%22%3E%3CTBODY%3E%3CTR%3E%3CTD%3E%3CDIV%20class%3D%22line%20number1%20index0%20alt2%22%3E1%3C%2FDIV%3E%3CDIV%20class%3D%22line%20number2%20index1%20alt1%22%3E2%3C%2FDIV%3E%3CDIV%20class%3D%22line%20number3%20index2%20alt2%22%3E3%3C%2FDIV%3E%3CDIV%20class%3D%22line%20number4%20index3%20alt1%22%3E4%3C%2FDIV%3E%3CDIV%20class%3D%22line%20number5%20index4%20alt2%22%3E5%3C%2FDIV%3E%3CDIV%20class%3D%22line%20number6%20index5%20alt1%22%3E6%3C%2FDIV%3E%3C%2FTD%3E%3CTD%3E%3CDIV%20class%3D%22container%22%3E%3CDIV%20class%3D%22line%20number1%20index0%20alt2%22%3E%3CSTYLE%3E%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FDIV%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BDIV%20class%3D%22line%20number2%20index1%20alt1%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B.ms-vh-div%5BDisplayName%3D%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3B%2339%3BProject%20Description%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3B%2339%3B%5D%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FDIV%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BDIV%20class%3D%22line%20number3%20index2%20alt2%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%7B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FDIV%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BDIV%20class%3D%22line%20number4%20index3%20alt1%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3Bwidth%20%3A%20700px%20!important%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FDIV%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BDIV%20class%3D%22line%20number5%20index4%20alt2%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%7D%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FDIV%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BDIV%20class%3D%22line%20number6%20index5%20alt1%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%3C%2FSTYLE%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FTD%3E%3C%2FTR%3E%3C%2FTBODY%3E%3C%2FTABLE%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLI%3E%3C%2FUL%3E%3CP%3E%3CSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi

I would like to confirm if there is any way to customize the width of column in share point list that display by using Classic experience.

 

Not using Designer, it will be better if I could realize that by editing the JSON of column.

1 Reply
Highlighted
Best Response confirmed by Tiffany_Jo (Occasional Contributor)
Solution

@Tiffany_Jo 

Solution:

  • Navigate to the Site >> Click on Site Settings gear >> Edit Page
  • Add Web Part >> Insert "Script Editor" Web Part
  • Edit Snippet and Insert the below Style in it.

    1
    2
    3
    4
    5
    6
    <style>
    .ms-vh-div[DisplayName='Project Description']
    {
        width : 700px !important;
    }
    </style>