0

I'd like to bold the column but not bold the value so it is clearer to see. I originally added my questions to an exiting post that was talking about this EXACT scenario but an admin deleted it EVEN THOUGH my questions was 100% related to the original topic.

I am trying to do the exact same thing to this post Bold txtcontent text and not the sharepoint field? with some existing JSON code for a SharePoint list Header using the "Configure Layout" but can't seem to splice in the correct syntax.

I attempted to modify the first field only "Client" with this, no errors but not the result, still both the label and value are bold.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Group",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "width": "100%",
                "padding": "1px 0px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-16"
                    },
                    "style": {
                        "flex": "1",
                        "box-sizing": "border-box",
                        "text-align": "left",
                        "padding": "0px 5px"
                    },
                    "children": [
                        {
                            "elmType": "div",                                                       
                            "children": [
                            {
                                "elmType": "span",
                                "style": {
                                    "font-weight": "bold"
                                },
                                "txtContent": "Client:"
                            },
                            {
                                "elmType": "span",
                                "txtContent": "[$Title]"
                            }                           
                            ]                   
                        },
                        {
                            "elmType": "div",
                            "txtContent": "='YEDate: ' + toLocaleDateString([$YEDate])"
                        },
                        {
                            "elmType": "div",
                            "txtContent": "='Status: ' + [$Status]"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-14"
                    },
                    "style": {
                        "flex": "1",
                        "box-sizing": "border-box",
                        "text-align": "left",
                        "padding": "0px 2px"
                    },
                    "children": [
                        {
                            "elmType": "div",
                            "txtContent": "='EngType: ' + [$EngType]"
                        },
                        {
                            "elmType": "div",
                            "txtContent": "='TaxPmtDue: ' + [$TaxPmtDue]"
                        },
                        {
                            "elmType": "div",
                            "txtContent": "='EntityType: ' + [$EntityType]"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-14"
                    },
                    "style": {
                        "flex": "1",
                        "box-sizing": "border-box",
                        "text-align": "left",
                        "padding": "0px 2px"
                    },
                    "children": [
                        {
                            "elmType": "div",
                            "txtContent": "='QarReq: ' + [$QarReq]"
                        },
                        {
                            "elmType": "div",
                            "txtContent": "='TaxRevReq: ' + [$TaxRevReq]"
                        }
                    ]
                }
            ]
        }
    ]
}
0

1 Answer 1

0

The div containing your two Spans has the class "ms-fontWeight-bold", which is causing everything inside to be bold. If you remove that class, your code works as desired.

Change this:

"class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-16"

to this:

"class": "ms-fontColor-neutralSecondary ms-fontSize-16"

Not the answer you're looking for? Browse other questions tagged or ask your own question.