24

I'm creating a slackbot for some automatic notifications, and I received a request to make the notification take up the entire width of the slack window, which looks much cleaner. I'm finding that there appears to be a specified width that the blocks seem to take up, and won't stretch horizontally beyond that point. I'm wondering if there is a workaround to remove the maximum width that appears to be taking place

Current implementation: Seems to have a maximum width that isn't specified

Ideally it would end up looking like this

I'm using something like this as my formatting block:

{
    "type": "section",
    "text": {
        "type": "mrkdwn",
        "text": "Testing if a longer message will force the update box to be wider Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    },
    "accessory": {
        "type": "button",
        "text": {
            "type": "plain_text",
            "text": "Button",
            "emoji": true
        },
        "value": "click_me_123"
    }
}

Is this a limitation with the block kit/slack api? Or is there a way to remove this width restriction?

Block Kit Builder site if anyone wants to play with formatting

T.j. Johnson
  • 241
  • 1
  • 2
  • 3

4 Answers4

6

Slack appears to have a block type that isn't particularly well documented called rich_text that does fill the width of the Slack message panel.

{
  "blocks": [
    {
      "type": "rich_text",
      "elements": [
        {
          "type": "rich_text_preformatted",
          "elements": [
            {
              "type": "text",
              "text": "+---------+---------+---------+---------+---------+---------+---------+---------+\n
| column1 | column2 | column3 | column4 | column5 | column6 | column7 | column8 |\n
+---------+---------+---------+---------+---------+---------+---------+---------+\n
| row1c1  | row1c2  | row1c3  | row1c4  | row1c5  | row1c6  | row1c7  | row1c8  |\n
+---------+---------+---------+---------+---------+---------+---------+---------+"
            }
          ]
        }
      ]
    }
  ]
}
Jim Graf
  • 77
  • 1
  • 1
3

No, you can not define the exact width of your Slack messages / blocks. The widths are predefined per message element and depend on the client your messages are rendered. This is by design, because Slack is meant to be client independent.

Erik Kalkoken
  • 30,467
  • 8
  • 79
  • 114
  • 8
    They "by design" decided to limit the width of blocks to 50% of total width, without any means to change it ? – Sbu Jun 29 '20 at 14:09
  • Yes. However, keep in mind that the specific are different for each platform and subject to change. – Erik Kalkoken Jun 29 '20 at 14:36
3

I tried to solve it for several hours and I definitely sure that it is not possible at this moment to do it with blocks.

There is only one alternative - using text API field:

curl --location --request POST 'https://slack.com/api/chat.postMessage' \
--header 'Authorization: Bearer xoxb-***************' \
--header 'Content-Type: application/json' \
--data-raw '{
    "channel": "*********",
    "text": "*text field*\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'\''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
}'

instead of blocks:

curl --location --request POST 'https://slack.com/api/chat.postMessage' \
--header 'Authorization: Bearer xoxb-***************' \
--header 'Content-Type: application/json' \
--data-raw '{
    "channel": "*********",
    "blocks": [
        {
            "type": "header",
            "text": {
                "type": "plain_text",
                "text": "blocks field"
            }
        },
        {
            "type": "divider"
        },
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'\''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
            }
        }
    ]
}'

The screenshot below shows that the first message sent with the text field is showing in full-width mode instead of the message sent with blocks...

enter image description here

MGerasimchuk
  • 53
  • 1
  • 7
  • 1
    This actually works. I am quite surprised that the block structure can't do this. – Rick Apr 03 '23 at 08:14
  • 1
    I can't believe Slack STILL hasn't addressed this issue! It's been like this for several years now! Very frustrating, but I'm at least glad the old trick still works (as of 06/2023). – Hans Jun 25 '23 at 02:47
-3

You can try to use the block below. Mentioned code helped me to send notification and use the whole page, instead of half.

{
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "```{8}```"
            }
        }
    ]
}

Here is link, where you can check it.

https://app.slack.com/block-kit-builder/T025QN6JG#%7B%22blocks%22:%5B%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22%60%60%60%7B8%7D%60%60%60%22%7D%7D%5D%7D