how to move the image and text left to right in SharePoint Form Header

Question

here is the code of header I wanted to move image and text left to right but I don't know the code. please answer me

{
    "elmType": "div",
    "style": {
        "border": "1px solid ",
        "padding": "10px"
    },
    "attributes": {
        "class": "sp-css-color-themePrimary sp-css-backgroundColor-themeLight"
    },
    "children": [
        {
            "elmType": "div",
            "txtContent": "=if(if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now))>'05:00:00' && if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now)) <'11:59:59' ,'Welcome To ATCN IT Helpdesk, ',if(if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now))>'12:00:00' && if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now))<'20:00:00' ,'Welcome To ATCN IT Helpdesk, ',if(if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now))>'20:00:00' ,'Welcome To ATCN IT Helpdesk ','')))",
            "attributes": {
                "class": "ms-fontSize-24 ms-fontWeight-semibold"
            }
        },
        {
            "elmType": "img",
            "style": {
                "border-radius": "50%"
            },
            "attributes": {
                "src": "=getUserImage(@me, 's')"
            }
        },
        {
            "elmType": "div",
            "style": {
                "border-radius": "50%",
                "padding": "0 5px"
            },
            "txtContent": "=substring(replaceAll(@me,'.',' '),0,indexOf(replaceAll(@me,'.',' '),'@'))",
            "attributes": {
                "class": "ms-fontSize-12 ms-fontWeight-semibold"
            }
        }
    ]
}

Answer 1

Hi @IT Support ,

Please try to change:

 {
            "elmType": "img",
            "style": {
                "border-radius": "50%"
            },

to:

 {
            "elmType": "img",
            "style": {
                "padding-left": "300px"
            },

And this is the result.

Hope this is helpful. :-)

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi @IT Support ,

You can try to use "padding-left" to make it:

{
    "elmType": "div",
    "style": {
        "border": "1px solid ",
        "padding": "10px",
        "padding-left": "300px"
    },
……
……
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.